/* FOWIR Studio — a single, responsive design system. */
@font-face {
  font-family:FWSystem;
  src:local("Inter"),local("SF Pro Display"),local("Helvetica Neue");
  font-display:swap
}
:root {
  color-scheme:dark;
  --bg:#080809;
  --surface:#141416;
  --ink:#f5f5f7;
  --muted:#b1b4c1;
  --line:#ffffff1f;
  --blue:#54aeff;
  --radius:28px;
  --gutter:clamp(24px,6vw,100px);
  --width:1240px;
  --ease:cubic-bezier(.2,.7,.2,1)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:FWSystem,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased
}
body.menu-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default
}
img,svg {
  display:block;
  max-width:100%
}
img {
  height:auto
}
h1,h2,h3,h4,p,figure,blockquote {
  margin:0
}
h1,h2,h3,h4 {
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:650;
  text-wrap:balance
}
p {
  text-wrap:pretty
}
h1 {
  font-size:clamp(48px,6.8vw,96px)
}
h2 {
  font-size:clamp(36px,4.4vw,62px)
}
h3 {
  font-size:clamp(24px,2.4vw,34px)
}
h2 span,h1>span:not(.gradient-text),.display-copy span {
  color:var(--muted)
}
small {
  font-size:14px
}
strong,b {
  font-weight:600
}
em {
  font-style:normal
}
::selection {
  background:#3285e5;
  color:white
}
:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
.fw-icon {
  width:28px;
  height:28px;
  flex:none
}
.skip-link {
  position:fixed;
  top:-80px;
  left:24px;
  background:#fff;
  color:#111;
  padding:12px 20px;
  z-index:1000;
  border-radius:8px
}
.skip-link:focus {
  top:12px
}
.section-pad {
  padding:110px var(--gutter)
}
.section-head {
  max-width:var(--width);
  margin:0 auto 56px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:36px
}
.section-head>p,.section-head>div+p {
  max-width:340px;
  color:var(--muted);
  font-size:18px;
  line-height:1.6
}
.section-kicker,.eyebrow {
  font-size:15px;
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.4;
  margin-bottom:24px
}
.section-kicker {
  color:var(--blue)
}
.eyebrow {
  color:#c7c7ce
}
.surface-section {
  --ink:#f1f1f4;
  --muted:#a1a3ae;
  --line:#ffffff17;
  --surface:#191b20;
  --blue:#8db7ef;
  color:var(--ink);
  background:#101114;
  color-scheme:dark;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:46px;
  padding:12px 24px;
  border:0;
  border-radius:100px;
  font-size:16px;
  line-height:1.3;
  font-weight:500;
  transition:background .25s,transform .25s
}
.button:hover {
  transform:translateY(-2px)
}
.button-blue {
  background:#087aef;
  color:#fff
}
.button-blue:hover {
  background:#248cf4
}
.button-light {
  background:#f5f5f7;
  color:#171719
}
.button-dark {
  background:#f0f1f4;
  color:#171719;
}
.text-link {
  font-size:15px;
  font-weight:500;
  display:inline-flex;
  gap:12px;
  align-items:center;
  white-space:normal
}
.text-link>span {
  color:var(--blue);
  transition:transform .25s
}
.text-link:hover>span {
  transform:translateX(4px)
}
.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}
/* Navigation */
.site-header {
  height:76px;
  position:sticky;
  top:0;
  z-index:100;
  max-width:1440px;
  margin:auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  gap:34px;
  background:#080809ed;
  backdrop-filter:blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s
}
.site-header.scrolled {
  border-color:var(--line)
}
.brand {
  margin-right:auto;
  flex:none
}
.brand img {
  width:124px;
  height:auto
}
.desktop-nav {
  display:flex;
  gap:30px;
  font-size:14px;
  color:#b9b9bf
}
.desktop-nav a {
  padding:10px 0;
  transition:color .2s
}
.desktop-nav a:hover,.desktop-nav .active {
  color:#fff
}
.desktop-nav .active {
  box-shadow:0 1px var(--blue)
}
.header-cta {
  white-space:nowrap;
  flex-shrink:0;
  font-size:14px;
  padding:9px 17px;
  border:1px solid #ffffff3d;
  border-radius:30px
}
.header-cta:hover {
  background:#fff;
  color:#111
}
.header-cta span {
  margin-left:8px
}
.menu-toggle {
  display:none;
  background:none;
  border:0;
  color:white;
  width:40px;
  height:40px;
  padding:10px
}
.menu-toggle span {
  display:block;
  height:1px;
  background:currentColor;
  margin:6px 0;
  transition:transform .3s
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform:translateY(3.5px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:last-child {
  transform:translateY(-3.5px) rotate(-45deg)
}
.mobile-menu {
  display:none
}
.scroll-progress {
  position:fixed;
  left:0;
  top:0;
  width:100%;
  height:2px;
  z-index:110;
  pointer-events:none;
  transform:scaleX(var(--scroll,0));
  transform-origin:left;
  background:#2997ff
}
/* Home hero */
.hero {
  text-align:center;
  padding:62px var(--gutter) 36px;
  overflow:clip;
  background:radial-gradient(ellipse at 50% 68%,#22334735,transparent 52%),#080809;
}
.hero-content {
  position:relative;
  z-index:1;
  max-width:960px;
  margin:auto
}
.hero .eyebrow {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px
}
.tiny-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#65a9ff
}
.hero h1 {
  font-size:clamp(60px,8vw,116px);
  line-height:.99;
  letter-spacing:-.062em
}
.hero h1>span {
  display:block;
  color:#f5f5f7
}
.hero .gradient-text {
  background:linear-gradient(115deg,#dbe5f1 5%,#a7b5cc 48%,#ad97b3 100%);
  color:transparent;
  background-clip:text;
  -webkit-background-clip:text;
}
.hero-copy {
  max-width:620px;
  margin:25px auto;
  color:var(--muted);
  font-size:19px;
  line-height:1.55;
}
.hero-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:28px
}
.hero-stage {
  max-width:1080px;
  margin:32px auto 0;
  position:relative
}
.hero-stage img {
  width:100%;
  object-fit:contain
}
.hero-stage>div {
  transform:translate3d(0,var(--parallax-y,0),0)
}
.hero-stage figcaption {
  margin-top:4px;
  font-size:14px;
  color:#c2c2ca;
  letter-spacing:.015em
}
.hero-stage figcaption span {
  display:block;
  margin-top:6px;
  font-size:13px;
  color:#84848c
}
/* Editorial cards */
.highlights {
  background:#101012
}
.highlight-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  max-width:var(--width);
  margin:auto
}
.editorial-card {
  min-height:490px;
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#1e2026;
  isolation:isolate
}
.editorial-card img {
  width:100%;
  height:100%;
  position:absolute;
  object-fit:cover;
  transition:transform 1s var(--ease)
}
.editorial-card:hover img {
  transform:scale(1.035)
}
.editorial-card h3 {
  font-size:30px;
  line-height:1.08;
  letter-spacing:-.035em
}
.editorial-card small {
  font-weight:500;
  display:block;
  margin-bottom:12px
}
.photo-card>div {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:30px;
  background:linear-gradient(180deg,transparent 25%,#00000008 35%,#000000cc 100%)
}
.photo-card .round-arrow {
  align-self:flex-end;
  margin-top:26px
}
.round-arrow {
  width:34px;
  height:34px;
  background:#ffffff22;
  backdrop-filter:blur(12px);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:20px;
  transition:background .2s,transform .2s
}
.editorial-card:hover .round-arrow {
  background:#fff;
  color:#111;
  transform:rotate(8deg)
}
.photo-card:first-child img {
  object-position:42% center
}
.energy-card img {
  object-position:38% center
}
.interface-card {
  background:linear-gradient(145deg,#a7c9da,#6a8ca9 50%,#304c76);
  color:#fff;
  padding:30px
}
.interface-card>.round-arrow {
  position:absolute;
  bottom:30px;
  right:30px
}
.search-visual {
  margin-top:35px
}
.search-question {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:17px;
  background:#ffffffcf;
  border:1px solid #fff8;
  color:#202c3b;
  border-radius:14px;
  font-size:14px;
  box-shadow:0 18px 45px #15335e20
}
.search-response {
  margin-top:14px;
  margin-left:18px;
  padding:24px;
  background:#152f4dcc;
  border:1px solid #fff3;
  box-shadow:0 20px 45px #13264225;
  backdrop-filter:blur(20px);
  border-radius:18px
}
.search-response>.fw-icon {
  color:#b9d9ff;
  margin-bottom:15px
}
.search-response strong {
  display:block;
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.025em
}
.source-chips {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:18px
}
.source-chips span {
  font-size:13px;
  border:1px solid #ffffff30;
  border-radius:5px;
  padding:5px 8px
}
/* Capabilities */
.intro-section {
  text-align:center
}
.display-copy {
  font-size:clamp(42px,5.1vw,74px)
}
.lead-copy {
  max-width:610px;
  margin:28px auto 60px;
  font-size:20px;
  color:var(--muted)
}
.capability-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  max-width:var(--width);
  margin:auto;
  text-align:left
}
.capability-card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px;
  padding:36px;
  transition:transform .35s,box-shadow .35s;
}
.capability-card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 40px #00000009
}
.capability-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:44px;
  color:#6a6a72
}
.capability-top .fw-icon {
  width:40px;
  height:40px;
  color:#2579c8
}
.capability-card:nth-child(2) .fw-icon {
  color:#b27336
}
.capability-card:nth-child(3) .fw-icon {
  color:#7d67bb
}
.capability-card h3 {
  font-size:25px
}
.capability-card p {
  font-size:16px;
  color:var(--muted);
  margin:15px 0 30px
}
.capability-card>span {
  font-size:15px;
  color:#006ad4
}
/* Six code-native interfaces */
.product-showcase {
  background:#080809
}
.showcase-tabs {
  display:flex;
  justify-content:center;
  gap:6px;
  margin:0 auto 40px;
  width:max-content;
  max-width:100%;
  border-radius:100px;
  padding:6px;
  background:#202024
}
html:not(.enhanced) .showcase-tabs {
  display:none
}
.showcase-tabs button {
  display:flex;
  align-items:center;
  gap:9px;
  background:none;
  color:#aaaab2;
  border:0;
  border-radius:80px;
  padding:12px 17px;
  font-size:15px;
  white-space:nowrap
}
.showcase-tabs .fw-icon {
  width:18px;
  height:18px
}
.showcase-tabs button[aria-selected=true] {
  background:#f5f5f7;
  color:#171719
}
.showcase-tabs button:hover {
  color:#fff
}
.showcase-tabs button[aria-selected=true]:hover {
  color:#171719
}
.showcase-panel {
  max-width:1000px;
  margin:auto;
  text-align:center
}
.showcase-panel>.text-link {
  margin-top:30px
}
.showcase-ui {
  padding:44px 60px;
  border-radius:30px;
  background:radial-gradient(ellipse at 70% 0%,#3d516456,transparent 70%),#11161e;
  border:1px solid #ffffff14;
}
.product-ui {
  --ui-accent:#8cbcff;
  --ui-soft:#1d2b43;
  --ui-text:#edf0f6;
  color:var(--ui-text);
  text-align:left;
  margin:0;
  border:1px solid #343945;
  border-radius:16px;
  background:#12161d;
  box-shadow:0 20px 60px #0002;
  overflow:hidden;
  font-size:15px;
  line-height:1.5;
  container-type:inline-size;
  color-scheme:dark
}
.ui-chrome {
  display:flex;
  gap:16px;
  align-items:center;
  padding:15px 24px;
  border-bottom:1px solid #2b313c;
  background:#1c222c
}
.ui-brand {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  letter-spacing:.07em;
  font-weight:700
}
.ui-brand .ui-brand-logo {
  display:block;
  width:108px;
  height:auto;
  object-fit:contain;
  flex:none
}
.ui-concept {
  font-size:13px;
  color:#a5aebd;
  margin-left:auto;
}
.ui-avatar {
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:13px;
  font-weight:600;
  background:var(--ui-soft);
  color:var(--ui-accent)
}
.ui-canvas {
  padding:26px 30px;
  min-height:332px
}
.ui-breadcrumb {
  font-size:13px;
  color:#9ba5b5;
  margin-bottom:18px;
}
.ui-breadcrumb span {
  margin:0 9px;
  color:#acb0b8
}
.ui-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:28px
}
.ui-heading h3 {
  font-size:22px;
  letter-spacing:-.03em
}
.status-dot {
  font-size:13px;
  color:#94b4a2;
  display:flex;
  align-items:center;
  gap:5px;
  white-space:nowrap
}
.status-dot:before {
  content:"";
  width:4px;
  height:4px;
  background:#4c9876;
  border-radius:50%
}
.product-ui figcaption {
  border-top:1px solid #2b313c;
  font-size:13px;
  color:#9ba5b5;
  padding:11px 24px;
  background:#151922;
}
.ai-question {
  border:1px solid #354155;
  background:#1c222c;
  border-radius:10px;
  padding:15px 16px;
  display:flex;
  justify-content:space-between;
  font-size:16px;
  gap:12px
}
.ai-question>span {
  color:var(--ui-accent)
}
.ai-answer {
  display:flex;
  gap:18px;
  margin-top:22px;
  padding:23px;
  background:var(--ui-soft);
  border-radius:12px
}
.ai-mark {
  color:var(--ui-accent)
}
.ai-answer small {
  font-size:13px;
  letter-spacing:.07em;
  color:#a0b8db;
  font-weight:600
}
.ai-answer h4 {
  font-size:22px;
  margin:8px 0 10px
}
.ai-answer p {
  max-width:460px;
  font-size:14px;
  line-height:1.65;
  color:#b0bbcc
}
.ai-answer .source-chips span {
  background:#1c222c;
  border-color:#344864;
  color:#b0c6e3
}
.ui-bottom {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
  color:#9fa8b8;
  margin-top:23px
}
.ui-forms {
  --ui-accent:#79d9c6;
  --ui-soft:#16352f
}
.ui-signature {
  --ui-accent:#c1a1f2;
  --ui-soft:#30243f
}
.ui-erp {
  --ui-accent:#e7b086;
  --ui-soft:#382c24
}
.ui-solar {
  --ui-accent:#9cdbad;
  --ui-soft:#20382b
}
.ui-zircle {
  --ui-accent:#f1a5c5;
  --ui-soft:#3b2731
}
.form-preview {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:32px
}
.ui-pill {
  display:inline-block;
  background:var(--ui-soft);
  color:var(--ui-accent);
  padding:5px 10px;
  border-radius:20px;
  font-size:13px;
  font-weight:500
}
.form-preview h4 {
  font-size:22px;
  margin:14px 0 22px
}
.ui-field {
  position:relative;
  padding:10px 13px;
  background:#1c222c;
  border:1px solid #3a4549;
  border-radius:7px;
  margin:10px 0
}
.ui-field small,.ui-field b {
  display:block
}
.ui-field small {
  font-size:13px;
  color:#9da6b8
}
.ui-field b {
  font-size:13px;
  margin-top:3px;
  font-weight:500
}
.ui-field>span {
  position:absolute;
  right:14px;
  bottom:12px;
  color:var(--ui-accent)
}
.ui-checks {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--ui-accent);
  margin-top:15px
}
.form-preview aside {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  background:var(--ui-soft);
  border-radius:12px;
  text-align:center;
  padding:20px 12px
}
.progress-ring {
  width:98px;
  height:98px;
  border-radius:50%;
  background:conic-gradient(var(--ui-accent) 66%,#ffffff80 0);
  display:grid;
  place-items:center;
  position:relative;
  font-size:24px;
  font-weight:500;
  isolation:isolate
}
.progress-ring:before {
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  background:var(--ui-soft);
  z-index:-1
}
.form-preview aside small {
  font-size:13px;
  color:#a0c0b6
}
.signature-preview {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  align-items:center;
  gap:30px
}
.paper {
  padding:20px 25px;
  background:#eae6df;
  color:#292631;
  border:1px solid #fff3;
  box-shadow:0 8px 20px #0003;
}
.paper>small {
  font-size:13px;
  color:#706879;
}
.paper h4 {
  font-size:23px;
  margin:15px 0
}
.paper-lines {
  display:grid;
  gap:6px
}
.paper-lines i {
  height:3px;
  width:95%;
  background:#c8c3cb;
}
.paper-lines i:last-child {
  width:70%
}
.signature-stroke {
  width:160px;
  height:58px;
  fill:none;
  stroke:#796098;
  stroke-width:2;
  stroke-linecap:round
}
.signature-stroke path {
  stroke-dasharray:400;
  stroke-dashoffset:0
}
.signature-preview aside p {
  font-size:14px;
  color:#b3a6c4;
  margin-top:15px
}
.verified-seal {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  color:var(--ui-accent);
  margin-top:24px
}
.verified-seal .fw-icon {
  width:16px;
  height:16px
}
.ui-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:22px
}
.ui-metrics>div {
  padding:17px 14px;
  border:1px solid #323944;
  border-radius:10px;
  background:#1c222c
}
.ui-metrics small {
  font-size:13px;
  color:#a0a8b7
}
.ui-metrics strong {
  font-size:30px;
  letter-spacing:-.05em;
  display:block;
  margin:4px 0
}
.ui-metrics strong em {
  font-size:16px;
  color:#8a8d96
}
.ui-metrics span {
  font-size:13px;
  color:#969fad
}
.operations-chart {
  padding:18px;
  border:1px solid #323944;
  border-radius:10px;
  background:#191f29
}
.operations-chart>div:first-child {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:13px
}
.operations-chart small {
  font-size:13px;
  color:#9ea5b3
}
.chart-bars {
  display:flex;
  align-items:flex-end;
  gap:12px;
  height:105px;
  border-bottom:1px solid #313844;
  background:repeating-linear-gradient(to top,transparent 0 33px,#292f3a 33px 34px);
  padding:10px 10px 0
}
.chart-bars i {
  display:block;
  flex:1;
  height:var(--h);
  background:linear-gradient(to top,var(--ui-soft),var(--ui-accent));
  border-radius:4px 4px 0 0;
  transform-origin:bottom
}
.chart-labels {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:13px;
  color:#98a3b4;
  padding-top:9px
}
.energy-metrics {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin:6px 0 22px
}
.energy-metrics small {
  font-size:13px;
  color:#a5bbaf
}
.energy-metrics strong {
  display:block;
  font-size:38px;
  letter-spacing:-.045em;
  line-height:1.3
}
.energy-metrics em {
  font-size:14px;
  font-weight:400;
  color:#9db1a3
}
.sun-graphic {
  color:#bb9b54
}
.sun-graphic .fw-icon {
  width:54px;
  height:54px
}
.line-chart {
  height:145px;
  position:relative
}
.line-chart svg {
  width:100%;
  height:100%;
  position:relative;
  overflow:visible
}
.chart-grid {
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(to top,transparent 0 34px,#304237 34px 35px)
}
.chart-area {
  fill:var(--ui-accent);
  opacity:.1
}
.chart-line {
  fill:none;
  stroke:var(--ui-accent);
  stroke-width:2;
  stroke-dasharray:750;
  stroke-dashoffset:0
}
.community-cover {
  padding:26px;
  background:#e9dcd1;
  border-radius:12px;
  color:#634832;
  position:relative;
  overflow:hidden;
  min-height:130px
}
.community-cover>span {
  font-size:28px;
  line-height:1.05;
  font-weight:600;
  letter-spacing:-.04em;
  position:relative;
  z-index:1
}
.circle-art {
  position:absolute;
  right:0;
  top:0;
  width:180px;
  height:150px
}
.circle-art i {
  position:absolute;
  width:110px;
  height:110px;
  border-radius:50%;
  border:1px solid #f1dcc9;
  background:#c7886566;
  top:40px;
  right:-10px
}
.circle-art i:nth-child(2) {
  right:45px;
  top:10px;
  background:#a66b7644
}
.circle-art i:nth-child(3) {
  right:0;
  top:-35px;
  background:#e0b36755
}
.community-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:18px
}
.community-cards article {
  display:flex;
  gap:10px;
  align-items:center;
  background:#1c222c;
  border:1px solid #3b323e;
  border-radius:10px;
  padding:14px
}
.community-initial {
  flex:none;
  width:30px;
  height:30px;
  border-radius:8px;
  display:grid;
  place-items:center;
  background:#eadce3;
  color:#9e6d85;
  font-size:14px
}
.community-cards article:nth-child(2) .community-initial {
  background:#e1ebdf;
  color:#688264
}
.community-cards strong,.community-cards small {
  display:block
}
.community-cards strong {
  font-size:13px
}
.community-cards small {
  font-size:13px;
  color:#91888c;
  margin-top:3px
}
.community-cards article>span:last-child {
  margin-left:auto;
  font-size:13px;
  color:#9c9297
}
/* Diagrams and work */
.workflow-visual {
  max-width:var(--width);
  margin:auto;
  padding:46px 36px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:24px
}
.workflow-track {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.workflow-step {
  flex:1;
  min-width:0
}
.workflow-step span {
  width:42px;
  height:42px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  font-size:14px;
  margin-bottom:24px
}
.workflow-step strong {
  font-size:19px;
  letter-spacing:-.025em;
  display:block;
  line-height:1.25
}
.workflow-arrow {
  color:var(--muted);
  font-size:24px;
  flex:none;
  padding:0 12px
}
.workflow-visual figcaption {
  margin-top:36px;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-size:14px;
  color:var(--muted)
}
.work-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  max-width:var(--width);
  margin:auto
}
.work-visual {
  aspect-ratio:1.35;
  overflow:hidden;
  border-radius:24px;
  background:#d4dae1;
  display:grid;
  place-items:center;
  margin-bottom:26px
}
.work-visual>img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s
}
.work-card:hover .work-visual>img {
  transform:scale(1.035)
}
.work-ui {
  padding:26px;
  background:radial-gradient(ellipse at top,#294450,#14191f 80%);
}
.work-ui .product-ui {
  width:100%;
  transform:rotate(-3deg);
  transition:transform .6s
}
.work-card:hover .product-ui {
  transform:rotate(0)
}
.work-card>small {
  display:block;
  color:var(--muted);
  font-size:14px;
  margin-bottom:12px
}
.work-card>h3 {
  font-size:29px
}
.closing-cta,.detail-cta {
  text-align:center;
  padding:100px var(--gutter);
  background:radial-gradient(ellipse at 50% 120%,#242a3980,transparent 65%),#101012;
}
.closing-cta h2 {
  font-size:clamp(42px,5vw,70px);
  max-width:860px;
  margin:0 auto 24px;
}
.closing-cta .section-kicker,.detail-cta .section-kicker {
  color:#b3b3bd
}
/* Inner-page openings */
.page-hero,.product-intro,.contact-hero {
  max-width:1440px;
  margin:auto;
  padding:100px var(--gutter) 90px
}
.page-hero h1,.product-intro h1,.contact-hero h1 {
  max-width:1060px
}
.page-lead,.contact-intro {
  max-width:650px;
  margin-top:30px;
  color:var(--muted);
  font-size:20px;
  line-height:1.6
}
.page-hero>.eyebrow,.product-intro>.eyebrow,.contact-hero>.eyebrow {
  color:var(--blue)
}
.wide-editorial {
  max-width:var(--width);
  margin:0 auto 100px;
  padding:0;
  overflow:hidden;
  border-radius:28px;
  position:relative
}
.wide-editorial img {
  width:100%;
  aspect-ratio:2.4;
  object-fit:cover
}
.wide-editorial figcaption {
  position:absolute;
  bottom:24px;
  left:28px;
  color:#fff;
  font-size:13px;
  background:#171719a6;
  padding:7px 12px;
  border-radius:20px;
  backdrop-filter:blur(10px)
}
/* Services */
.service-list {
  padding:20px var(--gutter) 80px
}
.service-row {
  display:grid;
  grid-template-columns:50px minmax(0,1fr) minmax(0,.75fr);
  gap:40px;
  max-width:var(--width);
  margin:auto;
  padding:70px 0;
  border-bottom:1px solid var(--line);
  scroll-margin-top:18px
}
.service-row>b {
  font-size:15px;
  color:var(--muted)
}
.service-row h2 {
  font-size:42px;
  margin:14px 0 26px
}
.service-row>div>p {
  font-size:15px;
  color:#a4a6b1
}
.service-row>p {
  color:var(--muted);
  font-size:18px;
  padding-top:34px;
  line-height:1.7
}
.service-row .workflow-visual {
  padding:20px;
  border-radius:14px;
  background:#191b21;
}
.service-row .workflow-track {
  gap:6px
}
.service-row .workflow-step span {
  width:28px;
  height:28px;
  font-size:13px;
  margin-bottom:15px
}
.service-row .workflow-step strong {
  font-size:15px;
  line-height:1.35;
  letter-spacing:-.01em
}
.service-row .workflow-arrow {
  font-size:17px;
  padding:0 4px
}
.service-row .workflow-visual figcaption {
  font-size:13px;
  padding-top:14px;
  margin-top:18px
}
.expertise-section,.process,.company-scope,.values,.use-cases {
  padding:100px var(--gutter)
}
.expertise-grid,.scope-grid,.feature-list,.use-case-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  max-width:var(--width);
  margin:auto
}
.expertise-grid article,.scope-grid article,.feature-list article {
  border:1px solid var(--line);
  border-radius:22px;
  padding:30px;
  min-width:0;
  background:var(--surface)
}
.expertise-grid h3,.scope-grid h3,.feature-list h3 {
  font-size:24px;
  margin:26px 0 15px
}
.expertise-grid p,.scope-grid p,.feature-list p {
  font-size:16px;
  color:var(--muted);
  line-height:1.7
}
.expertise-grid article>small,.scope-grid article>b,.feature-list article>small {
  display:block;
  color:var(--muted);
  font-size:13px;
  margin-bottom:30px
}
.expertise-grid .fw-icon,.scope-grid .fw-icon,.feature-list .fw-icon {
  width:36px;
  height:36px;
  color:#80a0c3
}
.expertise-grid article:nth-child(2) .fw-icon,.scope-grid article:nth-child(2) .fw-icon {
  color:#c1ab85
}
.expertise-grid article:nth-child(3) .fw-icon,.scope-grid article:nth-child(3) .fw-icon {
  color:#a59bc5
}
.expertise-grid article:nth-child(4) .fw-icon,.scope-grid article:nth-child(4) .fw-icon {
  color:#83b09e
}
.expertise-intro {
  max-width:380px;
  color:var(--muted);
  font-size:17px
}
.process {
  background:#111113
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  max-width:var(--width);
  margin:auto;
  gap:30px;
  counter-reset:process
}
.process-grid>div {
  border-top:1px solid #414147;
  padding-top:26px;
  counter-increment:process
}
.process-grid>div:before {
  content:"0" counter(process);
  display:block;
  color:#85858e;
  font-size:14px;
  margin-bottom:38px
}
.process-grid b {
  font-size:23px;
  letter-spacing:-.03em
}
.process-grid p {
  font-size:15px;
  color:var(--muted);
  margin-top:15px
}
.support-system {
  padding:100px var(--gutter)
}
.support-copy {
  max-width:var(--width);
  margin:0 auto 50px
}
.support-copy>p:not(.section-kicker) {
  max-width:700px;
  color:var(--muted);
  margin:25px 0;
  font-size:18px
}
.support-note {
  max-width:var(--width);
  margin:25px auto 0;
  font-size:14px;
  color:var(--muted)
}
/* Product catalogue */
.product-intro {
  text-align:center
}
.product-intro h1 {
  margin:auto
}
.product-intro .page-lead {
  margin:30px auto 0
}
.suite-symbols {
  display:flex;
  gap:26px;
  justify-content:center;
  margin-top:65px
}
.suite-symbols a {
  display:grid;
  place-items:center;
  width:78px;
  height:78px;
  border:1px solid #ffffff1d;
  background:linear-gradient(135deg,#ffffff13,#ffffff02);
  border-radius:20px;
  box-shadow:inset 0 1px #ffffff13;
  transition:transform .3s
}
.suite-symbols .fw-icon {
  width:34px;
  height:34px;
  color:#91adc9
}
.suite-symbols a:nth-child(2) {
  color:#81b4aa
}
.suite-symbols a:nth-child(3) .fw-icon {
  color:#b29bc8
}
.suite-symbols a:nth-child(4) .fw-icon {
  color:#cbab87
}
.suite-symbols a:nth-child(5) .fw-icon {
  color:#9dbe9a
}
.suite-symbols a:nth-child(6) .fw-icon {
  color:#d29aaf
}
.suite-symbols a:hover {
  transform:translateY(-6px)
}
.product-jump {
  position:sticky;
  top:76px;
  z-index:80;
  display:flex;
  justify-content:center;
  gap:28px;
  padding:18px var(--gutter);
  background:#111113ed;
  backdrop-filter:blur(20px);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:14px
}
.product-jump a {
  white-space:nowrap;
  color:#a7a7b0
}
.product-jump a:hover,.product-jump a[aria-current] {
  color:#fff
}
.product-story {
  padding:100px var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:65px;
  align-items:center;
  scroll-margin-top:55px;
  max-width:1440px;
  margin:auto;
  --tone:#6b9ed2
}
.product-story:nth-child(even) {
  background:#101012
}
.tone-cyan {
  --tone:#7caeaa
}
.tone-violet {
  --tone:#b29bca
}
.tone-orange {
  --tone:#c6a481
}
.tone-green {
  --tone:#8aad8d
}
.tone-pink {
  --tone:#cd97aa
}
.product-number {
  font-size:13px;
  color:var(--tone);
  letter-spacing:.06em;
  margin-bottom:22px
}
.product-story h2 {
  font-size:40px;
  margin-bottom:20px
}
.product-story-copy>h3 {
  font-size:23px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.03em;
  color:#d1d1d6
}
.product-story-copy>p:not(.product-number) {
  color:var(--muted);
  font-size:16px;
  margin:24px 0 28px;
  line-height:1.7
}
.product-visual {
  background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--tone) 35%,transparent),transparent 80%),#181a1d;
  padding:36px 24px;
  border-radius:24px;
  border:1px solid #ffffff12;
  min-width:0
}
.product-visual .product-ui {
  transform:perspective(1400px) rotateY(-4deg);
  transition:transform .7s
}
.product-visual:hover .product-ui {
  transform:perspective(1400px) rotateY(0)
}
.product-flow-labels {
  display:flex;
  justify-content:space-between;
  gap:10px;
  color:#ababba;
  font-size:13px;
  padding-top:22px
}
.product-flow-labels span+span:before {
  content:"→";
  margin-right:12px;
  color:var(--tone)
}
.suite-banner {
  position:relative;
  min-height:540px;
  display:flex;
  align-items:center;
  padding:80px var(--gutter);
  overflow:hidden;
  background:#1c1b19
}
.suite-banner>img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 60%;
  opacity:.55
}
.suite-banner:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#000e,#0002)
}
.suite-banner>div {
  position:relative;
  z-index:1;
  max-width:var(--width);
  width:100%;
  margin:auto
}
.suite-banner h2 span {
  color:#b6b6c1
}
.suite-banner p:not(.section-kicker) {
  max-width:520px;
  margin:25px 0;
  color:#cccbd1
}
.suite-banner .section-kicker {
  color:#f1c49d
}
/* Product details */
.detail-hero {
  padding:55px var(--gutter) 90px;
  max-width:1440px;
  margin:auto;
  text-align:center
}
.detail-back {
  display:block;
  text-align:left;
  font-size:14px;
  color:#9999a6;
  margin-bottom:55px
}
.detail-hero h1 {
  font-size:clamp(44px,6vw,82px);
  margin:12px auto 22px;
  max-width:1080px
}
.detail-hero h2 {
  font-size:clamp(24px,3vw,36px);
  color:#aaaab5;
  max-width:820px;
  margin:auto
}
.detail-hero>p:not(.eyebrow) {
  max-width:640px;
  margin:26px auto;
  font-size:18px;
  color:var(--muted)
}
.detail-hero>.eyebrow {
  color:color-mix(in srgb,var(--product-tone) 60%,white)
}
.detail-showcase {
  max-width:950px;
  margin:60px auto 0;
  padding:50px 65px;
  border:1px solid #ffffff17;
  border-radius:28px;
  background:radial-gradient(ellipse at top,color-mix(in srgb,var(--product-tone) 20%,transparent),transparent 80%),#151517
}
.detail-content {
  padding:100px var(--gutter)
}
.detail-heading {
  max-width:var(--width);
  margin:0 auto 50px
}
.feature-list article {
  border-color:var(--line);
}
.feature-list .fw-icon {
  color:var(--product-tone)
}
.feature-list h3 {
  font-size:22px;
  line-height:1.15
}
.feature-step {
  margin-top:25px;
  height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--product-tone) var(--step),#e5e5e8 var(--step))
}
.use-case-grid>a {
  border-top:1px solid var(--line);
  padding:25px 0;
  display:flex;
  flex-direction:column;
  gap:25px
}
.use-case-grid .fw-icon {
  color:#a8a8b5;
  width:22px;
  height:22px
}
.use-case-grid strong {
  font-size:22px;
  line-height:1.2;
  letter-spacing:-.03em
}
.use-case-grid small {
  font-size:13px;
  color:var(--muted)
}
.use-case-grid>a:hover small {
  color:#2997ff
}
.detail-cta h2 {
  font-size:clamp(36px,4vw,60px);
  max-width:960px;
  margin:0 auto 35px
}
/* Work */
.case-grid {
  padding:80px var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px 32px
}
.case-study {
  min-width:0
}
.case-study:first-child {
  grid-column:1/-1
}
.case-art {
  aspect-ratio:1.4;
  border-radius:26px;
  overflow:hidden;
  background:radial-gradient(ellipse at top,#253b3b,#12191c 70%);
  display:grid;
  place-items:center
}
.case-study:first-child .case-art {
  aspect-ratio:2.2;
  padding:60px 15%;
  background:radial-gradient(ellipse at top,#324759,#12161e 70%);
}
.case-art>.product-ui {
  width:100%;
  max-width:860px;
  transform:perspective(1400px) rotateX(4deg) rotateY(-6deg);
  box-shadow:30px 40px 65px #37465235
}
.case-art>img {
  width:100%;
  height:100%;
  object-fit:cover
}
.case-meta {
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:13px;
  color:#a6a8b2;
  margin-top:25px
}
.case-study h2 {
  font-size:32px;
  line-height:1.15;
  max-width:720px;
  margin:15px 0 22px
}
.case-study:first-child h2 {
  font-size:43px
}
.case-outcomes {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.case-outcomes span {
  border:1px solid var(--line);
  padding:6px 10px;
  border-radius:20px;
  font-size:13px;
  color:var(--muted);
}
.work-disclaimer {
  padding:0 var(--gutter) 60px;
  font-size:15px;
  color:var(--muted);
}
.work-disclaimer p {
  max-width:820px
}
/* About */
.manifesto {
  padding:100px var(--gutter)
}
.manifesto>* {
  max-width:var(--width);
  margin-left:auto;
  margin-right:auto
}
.manifesto blockquote {
  font-size:clamp(35px,4.4vw,62px);
  font-weight:600;
  line-height:1.13;
  letter-spacing:-.04em
}
.manifesto-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin-top:50px;
  font-size:18px;
  color:var(--muted);
  line-height:1.8
}
.value-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:45px;
  max-width:var(--width);
  margin:auto
}
.value-grid>div {
  padding-top:25px;
  border-top:1px solid var(--line)
}
.value-grid b {
  font-size:14px;
  color:var(--muted)
}
.value-grid h3 {
  margin:38px 0 18px;
  font-size:28px
}
.value-grid p {
  color:var(--muted);
  font-size:16px
}
.values {
  background:#101012
}
.legal-profile {
  padding:90px var(--gutter);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px
}
.legal-profile h2 {
  font-size:36px
}
.legal-profile dl {
  margin:0
}
.legal-profile dl>div {
  border-bottom:1px solid var(--line);
  padding:18px 0;
  display:grid;
  grid-template-columns:160px 1fr;
  gap:20px;
  font-size:15px
}
.legal-profile dt {
  color:var(--muted)
}
.legal-profile dd {
  margin:0
}
/* Contact */
.contact-workspace {
  padding:80px var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.65fr);
  gap:90px
}
.form-heading h2 {
  font-size:38px;
  margin-bottom:40px
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px 22px
}
.form-grid label>span {
  display:block;
  font-size:14px;
  font-weight:500;
  margin-bottom:10px
}
.form-grid input,.form-grid select,.form-grid textarea {
  display:block;
  width:100%;
  max-width:100%;
  border:1px solid #383b46;
  background:#1b1d24;
  color:#ededf3;
  border-radius:10px;
  min-height:50px;
  padding:13px 15px;
  font-size:15px;
  transition:border-color .2s;
}
.form-grid input,.form-grid select {
  height:52px;
  min-height:52px;
  line-height:1.5;
}
.form-grid select {
  /* Remove Safari's compact native styling while keeping native selection. */
  -webkit-appearance:none;
  appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23c6cad5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:16px 16px;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus {
  border-color:#2997ff
}
.form-grid textarea {
  resize:vertical;
  min-height:145px
}
.form-grid input::placeholder,.form-grid textarea::placeholder {
  color:#9696a0
}
.form-wide {
  grid-column:1/-1
}
.form-action {
  display:flex;
  gap:25px;
  align-items:center
}
.form-action button {
  flex:none
}
.form-action p {
  font-size:13px;
  line-height:1.6;
  color:#a9adb8;
  max-width:310px
}
.contact-aside {
  padding-top:8px
}
.contact-aside>div {
  padding:25px 0;
  border-bottom:1px solid var(--line);
}
.contact-aside>div:first-child {
  padding-top:0
}
.contact-aside p {
  font-size:13px;
  color:#a4a6b1;
  margin-bottom:12px
}
.contact-aside a {
  font-size:19px;
  letter-spacing:-.025em
}
.contact-aside a:hover {
  color:var(--blue);
}
.contact-aside address {
  font-style:normal;
  font-size:16px;
  line-height:1.8;
  color:#b8bac4;
}
.contact-image {
  margin-top:32px;
  border-radius:18px;
  width:100%;
  aspect-ratio:1.4;
  object-fit:cover
}
.form-status {
  font-size:14px;
  color:#bdd1ed;
  margin-top:15px
}
/* Footer and documents */
.site-footer {
  padding:70px var(--gutter) 25px;
  background:#080809;
  color:#9797a0
}
.footer-main {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:50px;
  max-width:var(--width);
  margin:auto
}
.footer-wordmark {
  width:160px;
  height:auto;
  opacity:.85
}
.footer-main>div>p {
  font-size:15px;
  line-height:1.8;
  margin-top:22px
}
.footer-links {
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:13px;
  font-size:14px
}
.footer-links>span {
  color:#f5f5f7;
  font-size:13px;
  margin-bottom:10px
}
.footer-links a:hover,.footer-bottom a:hover {
  color:#fff
}
.footer-bottom {
  border-top:1px solid #ffffff18;
  max-width:var(--width);
  margin:55px auto 0;
  padding-top:25px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:13px
}
.footer-bottom>div {
  display:flex;
  align-items:center;
  gap:20px
}
.motion-toggle {
  border:1px solid #ffffff27;
  background:transparent;
  color:#bdbdc5;
  border-radius:20px;
  font-size:13px;
  padding:7px 12px;
  min-height:32px
}
.legal-page {
  background:#08090c;
  color:#dddfe7;
  color-scheme:dark;
  font-family:FWSystem,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
.legal-nav {
  background:#080809;
  padding:24px var(--gutter);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#eeeef2;
  gap:24px
}
.legal-nav img {
  width:124px;
  height:auto
}
.legal-nav a {
  font-size:15px
}
.legal-page .legal-document {
  max-width:960px!important;
  width:100%;
  margin:50px auto!important;
  padding:48px!important;
  background:#14161b;
  border:1px solid var(--line);
  border-radius:22px;
  line-height:1.9!important;
  font-size:15px!important;
  color:#c3c5ce;
}
.legal-document h1 {
  font-size:clamp(28px,4vw,40px);
  line-height:1.4;
  letter-spacing:-.02em;
  margin-bottom:8px
}
.legal-document h6 {
  font-size:16px;
  line-height:1.6;
  margin:24px 0 10px;
  font-weight:650
}
.legal-document .legal-subtitle {
  font-size:18px;
  color:#a2a6b3;
  margin-bottom:25px
}
.legal-page>.legal-shell {
  padding:0 24px
}
.legal-page .form-row {
  margin-left:0!important;
  margin-right:0!important
}
/* Motion: finite entrances and viewport-relative depth, no scroll hijacking. */
.reveal {
  opacity:1;
  transform:none
}
.motion-ready .reveal:not(.is-visible) {
  opacity:0;
  transform:translateY(22px)
}
.motion-ready .reveal {
  transition:opacity .75s var(--ease),transform .85s var(--ease)
}
.motion-ready .showcase-panel:not([hidden]) .product-ui {
  animation:panel-arrive .55s var(--ease) both
}
.motion-ready .showcase-panel:not([hidden]) .chart-bars i {
  animation:bar-rise .9s var(--ease) both
}
.motion-ready .showcase-panel:not([hidden]) .signature-stroke path {
  animation:signature-draw 1.4s var(--ease) both
}
.motion-ready .showcase-panel:not([hidden]) .chart-line {
  animation:chart-draw 1.2s var(--ease) both
}
@keyframes panel-arrive {
  from {
    opacity:.4;
    transform:translateY(12px)
  }
  to {
    opacity:1;
    transform:none
  }
}
@keyframes bar-rise {
  from {
    transform:scaleY(.1)
  }
  to {
    transform:scaleY(1)
  }
}
@keyframes signature-draw {
  from {
    stroke-dashoffset:400
  }
  to {
    stroke-dashoffset:0
  }
}
@keyframes chart-draw {
  from {
    stroke-dashoffset:750
  }
  to {
    stroke-dashoffset:0
  }
}
.motion-off *, .motion-off *:before,.motion-off *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
.motion-off [data-parallax] {
  transform:none!important
}
/* Container-aware interfaces keep screenshots legible in every placement. */
@container (max-width: 520px) {
  .ui-canvas {
    padding:20px;
    min-height:310px
  }
  .ui-chrome {
    padding:12px 18px
  }
  .ui-heading {
    margin-bottom:20px
  }
  .ui-heading h3 {
    font-size:19px
  }
  .status-dot {
    display:none
  }
  .ai-answer {
    padding:18px;
    gap:12px
  }
  .ai-answer h4 {
    font-size:20px
  }
  .form-preview {
    gap:18px;
    grid-template-columns:1.4fr 1fr
  }
  .form-preview h4 {
    font-size:19px
  }
  .progress-ring {
    width:72px;
    height:72px;
    font-size:20px
  }
  .signature-preview {
    gap:18px
  }
  .paper {
    padding:16px
  }
  .paper h4 {
    font-size:20px
  }
  .ui-metrics {
    gap:8px
  }
  .ui-metrics>div {
    padding:12px 9px
  }
  .ui-metrics strong {
    font-size:27px
  }
  .ui-metrics span {
    display:none
  }
  .energy-metrics strong {
    font-size:32px
  }
  .ui-bottom>span:last-child {
    display:none
  }
  .community-cards {
    grid-template-columns:1fr
  }
  .community-cards article {
    padding:10px
  }
  .community-cards strong {
    font-size:13px
  }
  .community-cards small {
    font-size:13px
  }
  .community-cover>span {
    font-size:26px
  }
  .community-initial {
    width:26px;
    height:26px
  }
  .product-ui figcaption {
    padding:10px 18px;
    font-size:13px
  }
}
@container (max-width: 360px) {
  .ui-canvas {
    padding:16px;
    min-height:295px
  }
  .ui-heading h3 {
    font-size:17px
  }
  .ui-breadcrumb {
    font-size:13px;
    margin-bottom:12px
  }
  .ai-question {
    padding:12px;
    font-size:13px
  }
  .ai-answer {
    gap:10px;
    padding:14px
  }
  .ai-answer h4 {
    font-size:18px
  }
  .ai-answer p {
    font-size:13px
  }
  .ai-answer .fw-icon {
    width:21px;
    height:21px
  }
  .source-chips span {
    font-size:13px;
    padding:4px 6px
  }
  .form-preview {
    grid-template-columns:1fr
  }
  .form-preview aside {
    display:none
  }
  .signature-preview {
    grid-template-columns:1.1fr .9fr;
    gap:12px
  }
  .signature-preview aside p {
    font-size:13px
  }
  .paper {
    padding:12px
  }
  .paper h4 {
    font-size:17px
  }
  .signature-stroke {
    height:45px
  }
  .verified-seal {
    font-size:13px;
    align-items:flex-start
  }
  .ui-metrics strong {
    font-size:22px
  }
  .ui-metrics small {
    font-size:13px
  }
  .ui-metrics strong em {
    font-size:13px
  }
  .energy-metrics {
    gap:8px
  }
  .energy-metrics strong {
    font-size:26px
  }
  .sun-graphic .fw-icon {
    width:30px;
    height:30px
  }
  .energy-metrics small {
    font-size:13px
  }
  .line-chart {
    height:125px
  }
  .community-cover {
    padding:20px
  }
  .community-cover>span {
    font-size:23px
  }
  .circle-art {
    right:-40px
  }
  .ui-bottom {
    font-size:13px
  }
}
@media(min-width:1600px) {
  .section-pad,.service-list,.expertise-section,.process,.support-system,.case-grid,.work-disclaimer,.manifesto,.company-scope,.values,.legal-profile,.contact-workspace,.detail-content,.use-cases {
    padding-left:max(var(--gutter),calc((100vw - 1240px)/2));
    padding-right:max(var(--gutter),calc((100vw - 1240px)/2))
  }
}
@media(max-width:1100px) {
  .desktop-nav {
    gap:20px
  }
  .site-header {
    gap:24px
  }
  .highlight-grid {
    gap:16px
  }
  .editorial-card {
    min-height:455px
  }
  .editorial-card h3 {
    font-size:25px
  }
  .photo-card>div,.interface-card {
    padding:24px
  }
  .search-response {
    padding:20px;
    margin-left:0
  }
  .search-response strong {
    font-size:20px
  }
  .search-question {
    font-size:13px;
    padding:14px
  }
  .capability-card {
    padding:28px
  }
  .showcase-tabs button {
    padding:12px
  }
  .product-story {
    gap:35px
  }
  .product-visual {
    padding:26px 18px
  }
  .expertise-grid,.scope-grid,.feature-list {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .service-row {
    gap:25px;
    grid-template-columns:32px minmax(0,1fr) minmax(0,.7fr)
  }
  .service-row h2 {
    font-size:35px
  }
  .contact-workspace {
    gap:50px
  }
  .legal-profile {
    gap:40px
  }
  .legal-profile dl>div {
    grid-template-columns:125px 1fr
  }
  .showcase-ui {
    padding:45px
  }
  .work-ui {
    padding:20px
  }
}
@media(max-width:780px) {
  html {
    scroll-padding-top:80px
  }
  :root {
    --gutter:24px
  }
  .site-header {
    height:64px;
    gap:15px
  }
  .brand img {
    width:112px
  }
  .desktop-nav {
    display:none
  }
  .header-cta {
    margin-left:auto;
    font-size:13px;
    padding:8px 14px
  }
  .menu-toggle {
    display:block
  }
  .mobile-menu {
    display:block;
    position:fixed;
    z-index:95;
    inset:64px 0 0;
    background:#101012;
    visibility:hidden;
    opacity:0;
    transform:translateY(-10px);
    transition:opacity .25s,transform .3s,visibility .3s;
    padding:45px 32px
  }
  .mobile-menu.open {
    visibility:visible;
    opacity:1;
    transform:none
  }
  .mobile-menu nav {
    display:flex;
    flex-direction:column;
    gap:23px;
    font-size:32px;
    font-weight:600;
    letter-spacing:-.04em
  }
  .mobile-menu>p {
    position:absolute;
    bottom:45px;
    color:var(--muted);
    font-size:14px
  }
  .section-pad {
    padding-top:75px;
    padding-bottom:75px
  }
  .section-head {
    align-items:flex-start;
    flex-direction:column;
    gap:25px;
    margin-bottom:36px
  }
  .section-head>p {
    max-width:540px;
    font-size:16px
  }
  .section-kicker,.eyebrow {
    font-size:13px;
    margin-bottom:20px
  }
  .hero {
    padding-top:54px;
    padding-bottom:36px
  }
  .hero h1 {
    font-size:clamp(58px,11.6vw,86px)
  }
  .hero-copy {
    font-size:16px;
    max-width:460px
  }
  .hero-actions {
    gap:22px
  }
  .hero-actions .text-link {
    font-size:14px
  }
  .button {
    font-size:14px;
    padding:12px 21px;
    min-height:44px
  }
  .hero-stage {
    margin-top:38px
  }
  .hero-stage figcaption {
    font-size:13px
  }
  .highlight-grid {
    grid-template-columns:repeat(3,310px);
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:0 24px 15px;
    margin:0 -24px;
    scroll-padding-inline:24px;
    scrollbar-width:thin;
    scrollbar-color:#595961 transparent
  }
  .editorial-card {
    min-height:445px;
    scroll-snap-align:center
  }
  .editorial-card h3 {
    font-size:28px
  }
  .photo-card>div,.interface-card {
    padding:27px
  }
  .capability-grid {
    grid-template-columns:1fr
  }
  .capability-card {
    padding:28px
  }
  .capability-top {
    margin-bottom:24px
  }
  .capability-card p {
    max-width:500px;
    margin-bottom:22px
  }
  .lead-copy {
    font-size:18px;
    margin-bottom:40px
  }
  .showcase-tabs {
    justify-content:flex-start;
    border-radius:15px;
    width:100%;
    overflow-x:auto;
    scrollbar-width:thin;
    scrollbar-color:#555 transparent;
    padding:7px;
    margin-bottom:25px
  }
  .showcase-tabs button {
    flex-direction:column;
    padding:10px 13px;
    gap:8px;
    border-radius:10px;
    font-size:13px
  }
  .showcase-tabs .fw-icon {
    width:19px;
    height:19px
  }
  .showcase-ui {
    padding:28px 24px;
    border-radius:22px
  }
  .showcase-panel>.text-link {
    font-size:15px
  }
  .workflow-visual {
    padding:28px
  }
  .workflow-track {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .workflow-arrow {
    display:none
  }
  .workflow-step span {
    margin-bottom:15px
  }
  .workflow-step strong {
    font-size:18px
  }
  .workflow-visual figcaption {
    font-size:13px
  }
  .work-grid {
    gap:22px
  }
  .work-card>h3 {
    font-size:24px
  }
  .work-ui {
    padding:16px
  }
  .work-visual {
    aspect-ratio:1.15;
    border-radius:20px
  }
  .work-ui .product-ui {
    min-width:360px;
    transform:rotate(-3deg) scale(.8)
  }
  .closing-cta,.detail-cta {
    padding:90px 24px
  }
  .closing-cta h2 {
    font-size:64px
  }
  .page-hero,.product-intro,.contact-hero {
    padding:65px 24px
  }
  .page-hero h1,.contact-hero h1 {
    font-size:clamp(45px,7.2vw,65px)
  }
  .page-lead,.contact-intro {
    font-size:17px;
    margin-top:24px
  }
  .wide-editorial {
    margin:0 24px 65px;
    border-radius:20px
  }
  .wide-editorial img {
    aspect-ratio:1.7
  }
  .service-list {
    padding:0 24px 45px
  }
  .service-row {
    padding:45px 0;
    grid-template-columns:26px 1fr;
    gap:20px
  }
  .service-row>p {
    grid-column:2;
    padding-top:0;
    font-size:16px
  }
  .service-row h2 {
    font-size:34px
  }
  .expertise-section,.process,.company-scope,.values,.use-cases,.detail-content,.support-system,.manifesto {
    padding:70px 24px
  }
  .expertise-grid article,.scope-grid article,.feature-list article {
    padding:26px
  }
  .process-grid {
    grid-template-columns:1fr 1fr;
    gap:32px
  }
  .support-copy>p:not(.section-kicker) {
    font-size:16px
  }
  .suite-symbols {
    gap:14px;
    margin-top:42px
  }
  .suite-symbols a {
    width:60px;
    height:60px;
    border-radius:15px
  }
  .suite-symbols .fw-icon {
    width:27px;
    height:27px
  }
  .product-jump {
    top:64px;
    justify-content:flex-start;
    gap:24px;
    overflow:auto;
    padding:16px 24px;
    scrollbar-width:none
  }
  .product-story {
    grid-template-columns:1fr;
    padding:65px 24px;
    gap:35px
  }
  .product-story h2 {
    font-size:36px
  }
  .product-story-copy>h3 {
    max-width:500px
  }
  .product-story-copy>p:not(.product-number) {
    max-width:580px
  }
  .product-visual {
    padding:35px
  }
  .product-visual .product-ui {
    transform:none
  }
  .suite-banner {
    min-height:500px;
    padding:65px 24px
  }
  .suite-banner p:not(.section-kicker) {
    font-size:15px;
    max-width:450px
  }
  .detail-hero {
    padding:40px 24px 65px
  }
  .detail-back {
    margin-bottom:40px
  }
  .detail-hero h1 {
    font-size:54px
  }
  .detail-hero>p:not(.eyebrow) {
    font-size:16px
  }
  .detail-showcase {
    margin-top:40px;
    padding:28px 24px
  }
  .use-case-grid {
    grid-template-columns:1fr 1fr
  }
  .case-grid {
    padding:50px 24px;
    gap:50px 24px
  }
  .case-study:first-child .case-art {
    padding:40px 8%;
    aspect-ratio:1.7
  }
  .case-art {
    border-radius:20px;
    aspect-ratio:1
  }
  .case-meta {
    flex-direction:column;
    gap:6px
  }
  .case-study h2 {
    font-size:25px
  }
  .case-study:first-child h2 {
    font-size:34px
  }
  .work-disclaimer {
    padding:0 24px 50px
  }
  .manifesto-grid {
    gap:28px;
    font-size:16px;
    margin-top:35px
  }
  .value-grid {
    gap:25px
  }
  .value-grid h3 {
    font-size:24px
  }
  .value-grid p {
    font-size:16px
  }
  .legal-profile {
    padding:65px 24px;
    grid-template-columns:1fr;
    gap:30px
  }
  .contact-workspace {
    padding:55px 24px;
    grid-template-columns:1fr;
    gap:55px
  }
  .contact-aside {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px
  }
  .contact-aside>div {
    padding:0 0 25px
  }
  .contact-image {
    grid-column:1/-1;
    max-height:260px;
    object-position:center 65%;
    margin:0
  }
  .footer-main {
    grid-template-columns:1.5fr 1fr 1fr;
    gap:24px
  }
  .site-footer {
    padding:55px 24px 24px
  }
  .footer-wordmark {
    width:125px
  }
  .footer-bottom {
    align-items:flex-start;
    flex-direction:column;
    gap:18px;
    margin-top:35px
  }
  .legal-page .legal-document {
    padding:28px!important;
    margin:30px auto!important;
    font-size:16px!important
  }
}
@media(max-width:520px) {
  h1 {
    font-size:46px
  }
  h2 {
    font-size:38px
  }
  .hero {
    padding-left:18px;
    padding-right:18px
  }
  .hero .eyebrow {
    font-size:13px;
    letter-spacing:.055em
  }
  .hero h1 {
    font-size:60px
  }
  .hero-copy {
    max-width:330px;
    font-size:15px;
    line-height:1.65
  }
  .hero-actions {
    gap:18px
  }
  .hero-actions .text-link {
    font-size:13px;
    max-width:125px;
    line-height:1.5
  }
  .hero-stage {
    margin-top:24px
  }
  .hero-stage figcaption {
    margin-top:15px;
    font-size:13px
  }
  .hero-stage figcaption span {
    font-size:13px
  }
  .display-copy {
    font-size:43px
  }
  .highlights .section-head h2 {
    font-size:38px
  }
  .highlight-grid {
    grid-template-columns:repeat(3,min(82vw,340px))
  }
  .editorial-card {
    min-height:460px
  }
  .showcase-ui {
    padding:18px 12px;
    border-radius:18px
  }
  .showcase-tabs button {
    min-width:65px;
    padding:9px 10px
  }
  .showcase-tabs {
    gap:2px
  }
  .showcase-panel>.text-link {
    margin-top:23px
  }
  .workflow-visual {
    padding:24px 20px
  }
  .workflow-track {
    gap:26px 20px
  }
  .workflow-step strong {
    font-size:16px
  }
  .workflow-step span {
    width:32px;
    height:32px;
    font-size:13px
  }
  .work-grid {
    grid-template-columns:1fr;
    gap:42px
  }
  .work-visual {
    aspect-ratio:1.15
  }
  .work-ui .product-ui {
    min-width:0;
    transform:rotate(-3deg);
    width:100%
  }
  .work-ui {
    padding:22px
  }
  .work-card>h3 {
    font-size:28px
  }
  .closing-cta h2 {
    font-size:50px
  }
  .page-hero h1,.contact-hero h1 {
    font-size:46px
  }
  .product-intro h1 {
    font-size:43px
  }
  .wide-editorial img {
    aspect-ratio:1.2
  }
  .wide-editorial figcaption {
    font-size:13px;
    bottom:18px;
    left:18px
  }
  .expertise-grid,.scope-grid {
    gap:14px
  }
  .expertise-grid article,.scope-grid article {
    padding:22px
  }
  .expertise-grid h3,.scope-grid h3 {
    font-size:22px
  }
  .expertise-grid p,.scope-grid p {
    font-size:14px
  }
  .expertise-grid .fw-icon,.scope-grid .fw-icon {
    width:30px;
    height:30px
  }
  .service-row {
    grid-template-columns:1fr;
    gap:16px
  }
  .service-row>p {
    grid-column:1
  }
  .service-row h2 {
    font-size:34px
  }
  .service-row>b {
    font-size:13px
  }
  .service-row .workflow-visual {
    padding:18px
  }
  .service-row .workflow-track {
    display:flex;
    gap:8px
  }
  .service-row .workflow-arrow {
    display:block;
    padding:0
  }
  .service-row .workflow-step strong {
    font-size:14px
  }
  .process-grid b {
    font-size:22px
  }
  .process-grid p {
    font-size:15px
  }
  .suite-symbols {
    gap:9px
  }
  .suite-symbols a {
    width:45px;
    height:48px;
    border-radius:12px
  }
  .suite-symbols .fw-icon {
    width:24px;
    height:24px
  }
  .product-visual {
    padding:22px 12px;
    border-radius:20px
  }
  .product-flow-labels {
    font-size:13px;
    padding:18px 8px 0;
    gap:5px
  }
  .product-flow-labels span+span:before {
    margin-right:5px
  }
  .detail-hero h1 {
    font-size:45px
  }
  .detail-hero h2 {
    font-size:26px
  }
  .detail-showcase {
    padding:20px 12px;
    border-radius:20px
  }
  .feature-list {
    grid-template-columns:1fr;
    gap:16px
  }
  .feature-list article {
    padding:26px;
    display:grid;
    grid-template-columns:1fr 36px;
    gap:15px 20px
  }
  .feature-list article>small {
    margin:0
  }
  .feature-list article>.fw-icon {
    grid-column:2;
    grid-row:1/3
  }
  .feature-list h3 {
    margin:0;
    grid-column:1;
    font-size:23px
  }
  .feature-list p,.feature-step {
    grid-column:1/-1
  }
  .feature-step {
    margin-top:5px
  }
  .use-case-grid strong {
    font-size:19px
  }
  .use-case-grid>a {
    gap:18px
  }
  .case-grid {
    grid-template-columns:1fr
  }
  .case-study:first-child {
    grid-column:auto
  }
  .case-study:first-child .case-art {
    padding:25px 18px;
    aspect-ratio:1
  }
  .case-art {
    aspect-ratio:1.15
  }
  .case-study:first-child h2 {
    font-size:30px
  }
  .case-meta {
    flex-direction:row;
    flex-wrap:wrap
  }
  .case-study h2 {
    font-size:28px
  }
  .manifesto-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .value-grid {
    grid-template-columns:1fr;
    gap:35px
  }
  .value-grid h3 {
    margin-top:22px;
    font-size:28px
  }
  .value-grid p {
    font-size:16px
  }
  .legal-profile dl>div {
    grid-template-columns:1fr;
    gap:6px
  }
  .form-grid {
    grid-template-columns:1fr;
    gap:22px
  }
  .form-heading h2 {
    font-size:34px
  }
  .form-action {
    align-items:flex-start;
    flex-direction:column;
    gap:15px
  }
  .contact-aside {
    grid-template-columns:1fr;
    gap:20px
  }
  .contact-aside a {
    font-size:23px
  }
  .footer-main {
    grid-template-columns:1fr 1fr;
    gap:36px 20px
  }
  .footer-main>div:first-child {
    grid-column:1/-1
  }
  .footer-main>div>p {
    margin-top:17px
  }
  .footer-bottom {
    font-size:13px
  }
  .footer-bottom>div {
    gap:20px;
    flex-wrap:wrap
  }
  .legal-nav {
    padding:22px 24px
  }
  .legal-page .legal-document {
    padding:22px!important;
    font-size:15px!important
  }
}
@media(max-width:360px) {
  .site-header {
    gap:10px
  }
  .brand img {
    width:96px
  }
  .header-cta {
    font-size:13px;
    padding:8px 12px
  }
  .menu-toggle {
    width:36px;
    flex:none
  }
  .hero h1 {
    font-size:52px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .motion-ready .reveal:not(.is-visible) {
    opacity:1;
    transform:none
  }
  [data-parallax] {
    transform:none!important
  }
}
/* Editorial v6: content-led dark surfaces, transparent UI layers, finite storytelling. */
.hero-device-scene {
  position:relative;
  max-width:1060px;
  margin:54px auto 32px;
  padding:0 54px 44px;
  perspective:1600px
}
.device-halo {
  position:absolute;
  inset:10% 4% 0;
  background:radial-gradient(ellipse,#6d86b022,transparent 67%);
  pointer-events:none
}
.desktop-device {
  position:relative;
  padding:18px 12px 12px;
  border:1px solid #9fa5b566;
  border-top-color:#c4c8d999;
  border-radius:24px;
  background:linear-gradient(130deg,#393c43,#151619 40%,#33353a);
  box-shadow:0 40px 100px #000b,inset 0 1px #fff3;
  transform:rotateX(var(--device-rotate,5deg)) scale(var(--device-scale,.97));
  transform-origin:center 80%
}
.device-camera {
  position:absolute;
  top:6px;
  left:50%;
  width:4px;
  height:4px;
  background:#11161e;
  border:1px solid #64738555;
  border-radius:50%
}
.desktop-device .product-ui {
  border:1px solid #080a0f;
  box-shadow:none;
  border-radius:12px
}
.desktop-device .ui-canvas {
  padding:26px 34px
}
.desktop-device .ui-heading h3 {
  font-size:26px
}
.desktop-device .ui-metrics strong {
  font-size:39px
}
.desktop-device .chart-bars {
  height:135px
}
.floating-status {
  display:flex;
  align-items:center;
  gap:14px;
  position:absolute;
  right:0;
  bottom:106px;
  padding:21px 25px;
  text-align:left;
  background:#202530d9;
  border:1px solid #ffffff35;
  border-radius:18px;
  box-shadow:0 20px 50px #0008;
  backdrop-filter:blur(24px);
  transform:translateY(var(--float-y,0px))
}
.floating-status small,.floating-status strong,.floating-status span:not(.approval-icon) {
  display:block
}
.floating-status small {
  font-size:13px;
  letter-spacing:.1em;
  color:#a7b8c9;
  margin-bottom:7px
}
.floating-status strong {
  font-size:18px;
  letter-spacing:-.025em
}
.floating-status span:not(.approval-icon) {
  font-size:13px;
  color:#a1aaba;
  margin-top:5px
}
.approval-icon {
  border:1px solid #6cbaa650;
  width:35px;
  height:35px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#a4d1bd;
  background:#7ab49b15
}
.approval-icon .fw-icon {
  width:20px;
  height:20px
}
.device-caption {
  margin:28px auto 0;
  font-size:14px;
  color:#bfc4d0
}
.device-caption>span {
  display:block;
  color:#838b9b;
  font-size:13px;
  margin-top:6px
}
.hero-disciplines {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:24px;
  color:#b4b5c1;
  font-size:13px
}
.hero-disciplines i {
  width:3px;
  height:3px;
  background:#696a77;
  border-radius:50%
}
.rail-controls {
  max-width:var(--width);
  margin:24px auto 0;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-end
}
.rail-controls>span {
  margin-right:auto;
  font-size:13px;
  color:var(--muted)
}
.rail-controls button {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#25262c;
  color:#f2f2f6;
  font-size:19px
}
.rail-controls button:disabled {
  opacity:.3
}
.rail-controls button:not(:disabled):hover {
  background:#3b3d48
}
.rail-controls[hidden] {
  display:none
}
.workflow-story {
  background:#0e1014
}
.story-layout {
  max-width:var(--width);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);
  gap:80px;
  align-items:start
}
.story-screen {
  position:sticky;
  top:150px;
  padding:50px 0
}
.story-screen-inner {
  padding:24px;
  border:1px solid #ffffff14;
  background:radial-gradient(ellipse at 15% 0%,#35496566,transparent 80%),#161b23;
  border-radius:24px
}
.story-progress {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:23px
}
.story-progress span {
  display:block;
  width:25px;
  height:3px;
  border-radius:4px;
  background:#ffffff2d;
  transition:background .4s,width .4s
}
.story-progress .active {
  width:44px;
  background:#b7cce7
}
.story-chapter {
  min-height:360px;
  padding:65px 0;
  border-top:1px solid var(--line)
}
.story-chapter:first-child {
  border-top:0
}
.story-chapter h3 {
  font-size:35px;
  line-height:1.1;
  margin-bottom:20px
}
.story-chapter>p:not(.section-kicker) {
  font-size:17px;
  color:#b0b2bf;
  line-height:1.7
}
.story-chapter>small {
  display:block;
  font-size:14px;
  color:#828da2;
  margin-top:25px
}
.chapter-visual {
  display:none
}
.system-map {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  align-items:center;
  position:relative;
  gap:32px;
  padding:48px 36px 30px;
  background:radial-gradient(ellipse at center,#25303e5c,transparent 70%),#12151b;
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden
}
.system-map-sources,.system-map-outcomes {
  display:grid;
  gap:24px;
  z-index:1
}
.system-map-sources>span,.system-map-outcomes>span {
  padding:15px;
  background:#1d232d;
  border:1px solid #ffffff1b;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px
}
.system-map-sources .fw-icon {
  width:22px;
  height:22px;
  color:#9cbada
}
.system-map-core {
  justify-self:center;
  padding:28px 20px;
  min-width:150px;
  text-align:center;
  z-index:1;
  border:1px solid #b3cde56b;
  background:linear-gradient(130deg,#3b4d64aa,#1d273899);
  backdrop-filter:blur(16px);
  box-shadow:0 15px 40px #0005,inset 0 1px #fff2;
  border-radius:20px
}
.system-map-core>.fw-icon {
  margin:0 auto 18px;
  color:#b3cee8
}
.system-map-core strong {
  display:block;
  font-size:19px;
  line-height:1.2
}
.system-map-core small {
  display:block;
  font-size:13px;
  color:#acb8ca;
  margin-top:14px
}
.system-map-lines {
  position:absolute;
  left:22%;
  width:56%;
  top:42px;
  height:242px;
  fill:none;
  stroke:#7a9abb;
  stroke-width:1;
  stroke-dasharray:4 6;
  opacity:.55
}
.system-map figcaption {
  grid-column:1/-1;
  font-size:13px;
  color:#8b96a8;
  padding-top:22px;
  border-top:1px solid var(--line);
  margin-top:8px
}
.faq-section {
  background:#0b0c0f
}
.faq-section .section-head {
  align-items:center
}
.faq-list {
  max-width:var(--width);
  margin:auto;
  border-top:1px solid var(--line)
}
.faq-item {
  border-bottom:1px solid var(--line)
}
.faq-item summary {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:27px 0;
  list-style:none;
  font-size:22px;
  font-weight:500;
  letter-spacing:-.025em;
  line-height:1.35
}
.faq-item summary::-webkit-details-marker {
  display:none
}
.faq-item summary>span {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:none;
  color:#a2acbe;
  font-size:24px;
  font-weight:300;
  transition:transform .3s
}
.faq-item[open] summary>span {
  transform:rotate(45deg)
}
.faq-item>p {
  padding:0 55px 28px 0;
  max-width:800px;
  color:#a6adbc;
  font-size:16px;
  line-height:1.75
}
.closing-copy {
  color:#a6a8b4;
  font-size:18px;
  max-width:610px;
  margin:0 auto 32px
}
.brief-note {
  font-size:14px;
  color:#989fac;
  line-height:1.7;
  margin:22px 0 0
}
.brief-note a {
  text-decoration:underline;
  text-underline-offset:3px
}
.form-secondary {
  border:1px solid #4a4e5b;
  background:transparent;
  color:#dadce5
}
.form-buttons {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.next-steps {
  max-width:var(--width);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px
}
.next-steps li {
  display:grid;
  grid-template-columns:28px 1fr;
  gap:13px;
  counter-increment:next;
  padding:16px 0;
  border-top:1px solid var(--line)
}
.next-steps li:before {
  content:"0" counter(next);
  font-size:13px;
  color:#8cafd3;
  padding-top:2px
}
.next-steps strong {
  display:block;
  font-size:15px
}
.next-steps small {
  display:block;
  color:#9c9faa;
  font-size:14px;
  line-height:1.7;
  margin-top:5px
}
.engagement-options {
  max-width:var(--width);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.engagement-options>article {
  padding:30px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#16181e
}
.engagement-options .fw-icon {
  color:#95accd;
  width:32px;
  height:32px;
  margin-bottom:28px
}
.engagement-options h3 {
  font-size:26px;
  margin-bottom:16px
}
.engagement-options p {
  font-size:15px;
  color:#a4a8b5;
  line-height:1.7
}
.deliverable-list {
  list-style:none;
  margin:25px 0 0;
  padding:0;
  border-top:1px solid var(--line)
}
.deliverable-list li {
  font-size:14px;
  color:#c0c5d2;
  padding:10px 0;
  border-bottom:1px solid var(--line)
}
.deliverable-list li:before {
  content:"↳";
  color:#7f9dbf;
  margin-right:10px
}
.case-explanation {
  max-width:850px;
  margin-top:25px
}
.case-explanation summary {
  cursor:pointer;
  color:#a9c5eb;
  font-size:15px;
  list-style:none;
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:17px 0
}
.case-explanation summary::-webkit-details-marker {
  display:none
}
.case-explanation summary>span {
  font-size:19px;
  line-height:1
}
.case-explanation[open] summary>span {
  transform:rotate(45deg)
}
.case-explanation dl {
  margin:5px 0 0;
  display:grid;
  gap:18px
}
.case-explanation dt {
  color:#e2e3eb;
  font-size:14px;
  font-weight:600
}
.case-explanation dd {
  margin:5px 0 0;
  color:#9ba2b1;
  font-size:16px;
  line-height:1.7
}
.work-disclosure {
  max-width:760px;
  font-size:15px;
  color:#8993a5;
  border-left:1px solid #7e98b5;
  margin-top:27px;
  padding-left:18px;
  line-height:1.7
}
.legal-intro {
  max-width:860px;
  margin:auto;
  padding:75px 0 40px
}
.legal-intro>h1 {
  font-size:clamp(42px,5vw,64px)
}
.legal-intro>p {
  margin:25px 0;
  font-size:17px;
  line-height:1.8;
  color:#aab0bf
}
.legal-outline {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  margin:32px 0
}
.legal-outline>section {
  border:1px solid var(--line);
  border-radius:18px;
  padding:25px;
  background:#15181f
}
.legal-outline h2 {
  font-size:23px;
  margin-bottom:14px
}
.legal-outline p {
  font-size:16px;
  line-height:1.8;
  color:#a6adba
}
.legal-original {
  max-width:960px;
  margin:0 auto 65px
}
.legal-original>summary {
  cursor:pointer;
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  font-size:16px;
  background:#171a21
}
.legal-note {
  font-size:14px;
  color:#aeb4c3;
  line-height:1.8;
  border-left:2px solid #6485ac;
  padding-left:17px
}
.photo-caption {
  font-size:13px;
  color:#9ba3b2;
  line-height:1.6;
  margin-top:14px
}
.photo-caption a {
  text-decoration:underline;
  text-underline-offset:3px
}
.credits-grid {
  max-width:var(--width);
  margin:auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px
}
.credits-grid>figure {
  padding:24px;
  background:#15181e;
  border:1px solid var(--line);
  border-radius:20px
}
.credits-grid img {
  aspect-ratio:1.5;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:24px;
  width:100%
}
.credits-grid h2 {
  font-size:24px;
  margin-bottom:13px
}
.credits-grid p {
  font-size:15px;
  color:#a6adbb;
  margin:13px 0;
  line-height:1.7
}
.credits-grid a {
  font-size:15px;
  color:#a5c6eb
}
.simple-document {
  max-width:860px;
  padding:0 var(--gutter) 90px;
  margin:auto
}
.simple-document>section {
  margin:30px 0;
  border-top:1px solid var(--line);
  padding-top:30px
}
.simple-document h2 {
  font-size:28px;
  margin-bottom:20px
}
.simple-document p,.simple-document li {
  color:#a6adbb;
  font-size:16px;
  line-height:1.8
}
.simple-document a {
  color:#a7c8f0;
  text-decoration:underline;
  text-underline-offset:3px
}
.noscript-nav {
  display:flex;
  justify-content:center;
  gap:20px;
  flex-wrap:wrap;
  padding:18px 24px;
  background:#16191f;
  font-size:15px
}
.motion-ready [data-story-panel]:not([hidden]) {
  animation:panel-arrive .55s var(--ease) both
}
.motion-ready .reveal.is-visible .system-map-lines {
  animation:map-flow 2s linear 1
}
.motion-off .desktop-device {
  transform:none
}
.motion-off .floating-status {
  transform:none
}
@keyframes map-flow {
  from {
    stroke-dashoffset:100
  }
  to {
    stroke-dashoffset:0
  }
}
@media(min-width:781px) {
  .rail-controls {
    display:none
  }
}
@media(max-width:1100px) {
  .story-layout {
    gap:40px
  }
  .story-screen-inner {
    padding:18px
  }
  .hero-device-scene {
    padding-left:30px;
    padding-right:30px
  }
  .story-chapter h3 {
    font-size:31px
  }
}
@media(max-width:900px) {
  .story-layout {
    display:block
  }
  .story-screen {
    display:none
  }
  .chapter-visual {
    display:block;
    margin-top:30px
  }
  .story-chapter {
    min-height:0;
    padding:35px 0
  }
  .story-chapter>p:not(.section-kicker) {
    max-width:560px
  }
  .story-chapter h3 {
    max-width:540px
  }
  .engagement-options {
    grid-template-columns:1fr
  }
  .engagement-options>article {
    display:block
  }
  .engagement-options .fw-icon {
    grid-row:1/3
  }
  .engagement-options h3,.engagement-options p,.engagement-options .deliverable-list {
    grid-column:2
  }
  .system-map {
    gap:18px;
    padding:30px 22px
  }
  .system-map-core {
    min-width:130px;
    padding:22px 15px
  }
  .system-map-sources>span,.system-map-outcomes>span {
    font-size:13px;
    padding:12px;
    gap:7px
  }
}
@media(max-width:780px) {
  .hero-device-scene {
    margin-top:35px;
    padding:0 14px 15px
  }
  .desktop-device {
    padding:15px 8px 8px;
    border-radius:19px
  }
  .desktop-device .ui-canvas {
    padding:22px
  }
  .desktop-device .ui-heading h3 {
    font-size:22px
  }
  .desktop-device .ui-metrics strong {
    font-size:28px
  }
  .desktop-device .chart-bars {
    height:95px
  }
  .floating-status {
    right:0;
    bottom:65px;
    padding:15px 17px;
    gap:10px
  }
  .floating-status strong {
    font-size:15px
  }
  .hero-disciplines {
    gap:14px;
    font-size:13px
  }
  .hero-copy {
    font-size:17px
  }
  .faq-item summary {
    font-size:19px;
    padding:23px 0
  }
  .faq-item>p {
    font-size:15px;
    padding-right:20px
  }
  .closing-copy {
    font-size:16px
  }
  .credits-grid {
    grid-template-columns:1fr
  }
  .legal-intro {
    padding-top:50px
  }
  .form-grid input,.form-grid select,.form-grid textarea {
    font-size:16px
  }
}
@media(max-width:520px) {
  .hero-device-scene {
    padding:0 0 12px;
    margin-top:35px
  }
  .desktop-device .ui-canvas {
    padding:17px 13px;
    min-height:280px
  }
  .desktop-device .ui-heading h3 {
    font-size:18px
  }
  .desktop-device .ui-metrics strong {
    font-size:22px
  }
  .desktop-device .ui-metrics strong em {
    font-size:13px
  }
  .desktop-device .ui-chrome {
    padding:12px 14px
  }
  .desktop-device .ui-metrics {
    gap:6px
  }
  .desktop-device .ui-metrics>div {
    padding:12px 8px
  }
  .floating-status {
    position:relative;
    bottom:auto;
    right:auto;
    max-width:290px;
    margin:-15px auto 0;
    z-index:2;
    padding:14px 16px
  }
  .device-caption {
    font-size:13px;
    margin-top:20px
  }
  .hero-disciplines {
    gap:9px;
    font-size:13px;
    flex-wrap:wrap
  }
  .hero-disciplines i {
    width:2px;
    height:2px
  }
  .hero-copy {
    font-size:16px
  }
  .story-chapter h3 {
    font-size:30px
  }
  .story-chapter>p:not(.section-kicker) {
    font-size:16px
  }
  .system-map {
    grid-template-columns:1fr;
    padding:25px 20px;
    gap:25px
  }
  .system-map-sources,.system-map-outcomes {
    grid-template-columns:1fr;
    gap:8px
  }
  .system-map-sources>span,.system-map-outcomes>span {
    font-size:15px;
    justify-content:center
  }
  .system-map-core {
    min-width:180px
  }
  .system-map-lines {
    display:none
  }
  .system-map-core:before,.system-map-core:after {
    content:"↓";
    position:absolute;
    color:#93aac5;
    left:50%;
    transform:translateX(-50%);
    font-size:18px
  }
  .system-map-core {
    position:relative
  }
  .system-map-core:before {
    top:-25px
  }
  .system-map-core:after {
    bottom:-25px
  }
  .system-map figcaption {
    font-size:13px
  }
  .faq-item summary {
    font-size:18px;
    gap:15px
  }
  .faq-item>p {
    font-size:16px;
    padding-right:0
  }
  .engagement-options>article {
    padding:25px 22px;
    display:block
  }
  .engagement-options .fw-icon {
    margin-bottom:20px
  }
  .engagement-options h3 {
    font-size:27px
  }
  .legal-outline {
    grid-template-columns:1fr
  }
  .legal-intro>p {
    font-size:15px
  }
  .legal-note {
    font-size:13px
  }
  .simple-document {
    padding-left:24px;
    padding-right:24px
  }
}
@media(prefers-reduced-motion:reduce) {
  .desktop-device,.floating-status {
    transform:none
  }
}
/* Readability and non-scripted fallbacks. */
@container (max-width: 280px) {
  .product-ui .ui-metrics strong {
    font-size:18px
  }
  .ui-metrics>div {
    padding:10px 6px
  }
  .ui-metrics strong em {
    font-size:13px
  }
}
.next-steps article {
  padding:28px 0;
  border-top:1px solid var(--line)
}
.next-steps h3 {
  font-size:27px;
  margin:20px 0 16px
}
.next-steps p {
  font-size:16px;
  color:var(--muted);
  line-height:1.7
}
.engagement-options>article>small {
  display:block;
  color:#a3bbd9;
  font-size:13px;
  margin-bottom:24px
}
.form-action {
  align-items:flex-start;
  flex-direction:column;
  gap:20px
}
.form-action p {
  max-width:none;
  font-size:14px;
  line-height:1.8
}
.form-action p a,.wide-editorial figcaption a {
  text-decoration:underline;
  text-underline-offset:3px
}
.form-secondary {
  padding:13px 22px;
  border-radius:100px;
  font-size:15px
}
.copy-fallback {
  display:block;
  margin-top:25px;
  font-size:15px;
  color:var(--muted)
}
.copy-fallback textarea {
  width:100%;
  margin-top:12px;
  padding:15px;
  background:#171b23;
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  resize:vertical
}
html:not(.enhanced) .story-layout {
  display:block
}
html:not(.enhanced) .story-screen {
  display:none
}
html:not(.enhanced) .chapter-visual {
  display:block;
  margin-top:30px
}
html:not(.enhanced) .rail-controls,html:not(.enhanced) .project-form .form-grid,html:not(.enhanced) .menu-toggle {
  display:none
}
.legal-reading {
  padding:0 var(--gutter) 30px
}
.legal-reading .legal-intro {
  max-width:960px
}
.legal-reading-note {
  max-width:960px;
  margin:0 auto 44px;
  padding:32px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#14161c
}
.legal-reading-note h2 {
  font-size:28px;
  margin-bottom:20px
}
.legal-reading-note p {
  max-width:750px;
  font-size:16px;
  line-height:1.85;
  color:#b0b4c0;
  margin-bottom:18px
}
.legal-reading-note .section-kicker {
  font-size:14px;
  color:var(--blue)
}
.legal-reading-note .legal-source-date {
  font-size:14px;
  color:#9ba2b0
}
.legal-reading-note a {
  color:#a9cdf8
}
.legal-related {
  font-size:16px;
  color:var(--muted);
  line-height:1.8;
  background:transparent;
  border:0;
  padding:0
}
.legal-original>summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  list-style:none;
  line-height:1.7
}
.legal-original>summary::-webkit-details-marker {
  display:none
}
.legal-original>summary>span {
  font-size:24px
}
.legal-original[open]>summary>span {
  transform:rotate(45deg)
}
.legal-original .legal-document {
  padding:38px 32px;
  margin:20px 0 0;
  overflow-wrap:anywhere;
  color:#c3c7d1;
  background:#101218;
  border:1px solid var(--line);
  border-radius:20px;
  font-size:16px;
  line-height:1.95
}
.legal-original .legal-document h2 {
  font-size:30px;
  letter-spacing:0;
  line-height:1.6
}
.legal-original .legal-document h3 {
  font-size:19px;
  letter-spacing:0;
  line-height:1.8;
  margin:26px 0 14px
}
.legal-original .legal-document strong {
  color:#eef0f5
}
.simple-document {
  max-width:1050px
}
.simple-document h2:not(:first-child) {
  margin-top:42px
}
.simple-document p+p {
  margin-top:20px
}
.credits-grid {
  max-width:1440px;
  padding-top:10px
}
.case-explanation .text-link {
  display:inline-flex;
  margin-top:22px;
  font-size:15px
}
.case-study:not(:first-child) .case-art:has(>.product-ui) {
  padding:30px 22px
}
.wide-editorial figcaption {
  max-width:calc(100% - 56px);
  border:1px solid #ffffff20;
  line-height:1.6
}
.footer-bottom>div {
  flex-wrap:wrap
}
.project-form .form-heading {
  margin-bottom:30px
}
.system-map {
  max-width:var(--width);
  margin:auto;
  scroll-margin-top:150px
}
.highlight-grid {
  scrollbar-width:none
}
.highlight-grid::-webkit-scrollbar {
  display:none
}
.header-cta {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
@media(max-width:780px) {
  .next-steps {
    grid-template-columns:1fr;
    gap:14px
  }
  .next-steps article {
    padding:26px 0
  }
  .next-steps h3 {
    margin-top:14px
  }
  .legal-reading-note {
    padding:25px
  }
  .legal-original .legal-document {
    padding:24px 20px;
    font-size:15px
  }
  .wide-editorial figcaption {
    max-width:calc(100% - 36px);
    font-size:13px;
    border-radius:12px
  }
  .footer-bottom {
    font-size:13px
  }
  .footer-bottom>div {
    gap:16px 24px
  }
}
/* v7 — readable type, chromatic glass, and product-specific concept maps. */
:root {
  --glow-a:#409cff;
  --glow-b:#aa7dff;
  --glow-c:#59dce4;
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.hero {
  background:radial-gradient(ellipse at 24% 58%,#07578b25,transparent 52%),radial-gradient(ellipse at 78% 66%,#753bc72b,transparent 45%),#080809;
}
.hero .gradient-text {
  background-image:linear-gradient(115deg,#b9dfff 10%,#cac5ff 55%,#f2bed8);
}
.device-halo {
  inset:5% -4% -6%;
  background:radial-gradient(ellipse at 26% 55%,#008cde38,transparent 58%),radial-gradient(ellipse at 78% 62%,#a452f53b,transparent 58%);
  filter:blur(34px);
}
.desktop-device {
  border-color:#b8c7e577;
  box-shadow:0 42px 95px #000b,-24px 20px 85px -35px #007ee65c,30px 10px 90px -42px #b15dec66,inset 0 1px #fff6;
}
.floating-status {
  background:linear-gradient(140deg,#4c54665c,#171c2aea);
  border-color:#b8c8e05c;
  box-shadow:0 25px 60px #0009,0 0 42px -18px #7fabdf70,inset 0 1px #fff2;
  backdrop-filter:blur(30px) saturate(135%);
}
.product-story {
  --glow-a:var(--tone);
}
.tone-blue {
  --tone:#65a5ff;
  --glow-b:#b37afb;
}
.tone-cyan {
  --tone:#52d5d0;
  --glow-b:#648cff;
}
.tone-violet {
  --tone:#b38bff;
  --glow-b:#ef91c9;
}
.tone-orange {
  --tone:#ffb26f;
  --glow-b:#f17fbc;
}
.tone-green {
  --tone:#79d99e;
  --glow-b:#62cbe3;
}
.tone-pink {
  --tone:#ef91b9;
  --glow-b:#a38bff;
}
.product-intelligence,[data-active-product="intelligence"] {
  --glow-a:#55a5ff;
  --glow-b:#a87cff;
  --glow-c:#59dce4;
}
.product-forms,[data-active-product="forms"] {
  --glow-a:#4cd9cc;
  --glow-b:#628fff;
  --glow-c:#a7eddc;
}
.product-signature,[data-active-product="signature"] {
  --glow-a:#b191ff;
  --glow-b:#f393c4;
  --glow-c:#7ba4ff;
}
.product-erp,[data-active-product="erp"] {
  --glow-a:#ffb379;
  --glow-b:#f383b5;
  --glow-c:#8d9cff;
}
.product-solar,[data-active-product="solar"] {
  --glow-a:#91dfa8;
  --glow-b:#55cdda;
  --glow-c:#f0d589;
}
.product-zircle,[data-active-product="zircle"] {
  --glow-a:#f397c2;
  --glow-b:#9d8bff;
  --glow-c:#75c8eb;
}
.product-visual,.detail-showcase,.showcase-ui,.story-screen-inner {
  border:1px solid transparent;
  background:linear-gradient(145deg,#1b2332f5,#131722f5) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--glow-a) 75%,#fff),#ffffff12 45%,color-mix(in srgb,var(--glow-b) 75%,transparent)) border-box;
  box-shadow:0 28px 70px #0006,-18px 10px 70px -42px color-mix(in srgb,var(--glow-a) 70%,transparent),25px 22px 75px -45px color-mix(in srgb,var(--glow-b) 85%,transparent),inset 0 1px #fff2;
}
.detail-showcase {
  background:radial-gradient(ellipse at 8% 8%,color-mix(in srgb,var(--glow-a) 17%,transparent),transparent 65%),linear-gradient(145deg,#191f2dee,#11151fee) padding-box,linear-gradient(135deg,var(--glow-a),#ffffff18 45%,var(--glow-b)) border-box;
}
.product-visual .product-ui,.detail-showcase .product-ui {
  box-shadow:0 25px 45px #0007;
}
.engagement-options>article,.feature-list article,.suite-symbols a {
  --card-a:var(--glow-a);
  --card-b:var(--glow-b);
  border:1px solid transparent;
  background:linear-gradient(145deg,#1a1e29,#12151d) padding-box,linear-gradient(140deg,color-mix(in srgb,var(--card-a) 70%,transparent),#ffffff12 48%,color-mix(in srgb,var(--card-b) 75%,transparent)) border-box;
  box-shadow:0 15px 45px #0004,0 8px 48px -28px color-mix(in srgb,var(--card-a) 70%,transparent),inset 0 1px #ffffff14;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.engagement-options>article:nth-child(1),.suite-symbols a:nth-child(1) {
  --card-a:#ff9c79;
  --card-b:#ee80bd;
}
.engagement-options>article:nth-child(2),.suite-symbols a:nth-child(2) {
  --card-a:#84c8ec;
  --card-b:#44cbd7;
}
.engagement-options>article:nth-child(3),.suite-symbols a:nth-child(3) {
  --card-a:#837cfa;
  --card-b:#e4a0e5;
}
.suite-symbols a:nth-child(4) {
  --card-a:#f5c279;
  --card-b:#ec88bd;
}
.suite-symbols a:nth-child(5) {
  --card-a:#96dfa2;
  --card-b:#64cce0;
}
.suite-symbols a:nth-child(6) {
  --card-a:#ef9cbb;
  --card-b:#a592ed;
}
.system-map {
  background:radial-gradient(ellipse at 20% 20%,#2367a52b,transparent 55%),radial-gradient(ellipse at 82% 80%,#7833ac20,transparent 55%),#11151c;
  border-color:#809ad236;
  box-shadow:0 25px 75px #0005,inset 0 1px #ffffff12;
}
.system-map-core {
  background:linear-gradient(130deg,#397faf77,#52427a66);
  border-color:#b6d6f58c;
  box-shadow:0 22px 45px #0007,0 0 50px -15px #469bdd70,inset 0 1px #ffffff52;
  backdrop-filter:blur(24px);
}
.system-map-lines {
  stroke:#79b5ee;
  opacity:.75;
}
.system-map-sources>span,.system-map-outcomes>span {
  background:linear-gradient(130deg,#34405270,#1c2330b3);
  border-color:#bbcef02b;
  box-shadow:0 10px 30px #0003,inset 0 1px #ffffff10;
  backdrop-filter:blur(18px);
}
.workflow-visual {
  background:linear-gradient(135deg,#252d3a77,#161b25c9);
  border-color:#9dbbe337;
  box-shadow:0 16px 35px #0003,inset 0 1px #fff1;
}
.workflow-step span {
  color:#cfebff;
  border-color:#61b4ef8c;
  background:linear-gradient(135deg,#277fbd66,#3655b04a);
  box-shadow:0 0 24px -7px #348bd799,inset 0 1px #fff3;
}
.service-row .workflow-visual {
  background:linear-gradient(140deg,#213348aa,#191c27);
}
.service-row .workflow-step span {
  width:34px;
  height:34px;
}
.form-grid input,.form-grid select,.form-grid textarea {
  box-shadow:inset 0 1px #ffffff08,0 7px 18px #0002;
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus {
  box-shadow:0 0 0 3px #579de51e,0 8px 24px #0003;
}
.product-concept {
  position:relative;
  background:radial-gradient(ellipse at 50% 55%,color-mix(in srgb,var(--glow-a) 6%,transparent),transparent 68%),#0c0e13;
  scroll-margin-top:20px;
}
.product-concept .section-head {
  align-items:flex-start;
}
.product-concept .section-head>div {
  max-width:760px;
}
.product-concept .section-head>p {
  padding-top:43px;
}
.concept-diagram {
  max-width:var(--width);
  margin:auto;
  padding:48px 36px 28px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:1px solid transparent;
  border-radius:28px;
  background:linear-gradient(135deg,#151b26f5,#10131df5) padding-box,linear-gradient(135deg,color-mix(in srgb,var(--glow-a) 65%,transparent),#ffffff18 45%,color-mix(in srgb,var(--glow-b) 65%,transparent)) border-box;
  box-shadow:0 32px 80px #0006,0 14px 65px -38px color-mix(in srgb,var(--glow-a) 65%,transparent),inset 0 1px #fff2;
}
.concept-light {
  position:absolute;
  inset:-30%;
  z-index:-1;
  pointer-events:none;
  transform:rotate(-25deg);
  background:linear-gradient(90deg,transparent 30%,color-mix(in srgb,var(--glow-a) 18%,transparent) 44%,transparent 54%,color-mix(in srgb,var(--glow-b) 13%,transparent) 68%,transparent 78%);
  filter:blur(38px);
}
.concept-flow {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) 58px minmax(0,1.1fr) 58px minmax(0,1fr);
  align-items:center;
  padding:12px 0 48px;
}
.concept-node {
  min-width:0;
  position:relative;
  border:1px solid #c2d0e431;
  border-radius:20px;
  padding:26px 22px;
  background:linear-gradient(140deg,#3642574d,#1a2132a6);
  box-shadow:0 16px 36px #0005,inset 0 1px #ffffff18;
  backdrop-filter:blur(22px) saturate(125%);
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.concept-label {
  display:flex;
  align-items:center;
  gap:10px;
  color:#c1cbdf;
  font-size:13px;
  margin-bottom:24px;
}
.concept-label>span {
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid #b7cae745;
  border-radius:50%;
  background:#21304680;
  color:#d4eaff;
  font-size:13px;
}
.concept-node h3 {
  font-size:25px;
  line-height:1.2;
  letter-spacing:-.03em;
}
.concept-records {
  display:grid;
  gap:16px;
  list-style:none;
  padding:0;
  margin:26px 0 0;
}
.concept-records li {
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#c0c9da;
  font-size:15px;
  line-height:1.65;
}
.record-mark {
  width:12px;
  height:15px;
  border:1px solid color-mix(in srgb,var(--glow-a) 60%,white);
  border-radius:3px;
  flex:none;
  margin-top:5px;
  background:color-mix(in srgb,var(--glow-a) 15%,transparent);
}
.concept-records .fw-icon {
  width:19px;
  height:19px;
  flex:none;
  margin-top:3px;
  color:var(--glow-c);
}
.concept-engine {
  padding:28px 23px;
  border-color:color-mix(in srgb,var(--glow-a) 55%,transparent);
  background:linear-gradient(135deg,color-mix(in srgb,var(--glow-a) 18%,#151d2a),color-mix(in srgb,var(--glow-b) 12%,#161c28));
  box-shadow:0 22px 45px #0007,0 0 45px -22px color-mix(in srgb,var(--glow-a) 80%,transparent),inset 0 1px #fff3;
}
.concept-engine-icon {
  width:60px;
  height:60px;
  display:grid;
  place-items:center;
  margin:0 0 22px;
  border:1px solid color-mix(in srgb,var(--glow-a) 60%,transparent);
  border-radius:17px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--glow-a) 40%,#182536),color-mix(in srgb,var(--glow-b) 20%,#182536));
  box-shadow:0 8px 25px #0005,0 0 25px -8px color-mix(in srgb,var(--glow-a) 60%,transparent),inset 0 1px #fff5;
}
.concept-engine-icon .fw-icon {
  width:31px;
  height:31px;
  color:#edf6ff;
}
.concept-steps {
  list-style:none;
  padding:0;
  margin:22px 0 0;
  counter-reset:concept;
}
.concept-steps li {
  counter-increment:concept;
  position:relative;
  padding:11px 0 11px 23px;
  border-top:1px solid #ffffff16;
  font-size:14px;
  line-height:1.65;
  color:#d0d9e8;
}
.concept-steps li:before {
  content:counter(concept) ".";
  position:absolute;
  left:0;
  color:color-mix(in srgb,var(--glow-a) 65%,white);
}
.concept-link {
  width:100%;
  padding:0 5px;
}
.concept-link svg {
  width:100%;
  height:24px;
  overflow:visible;
  fill:none;
  stroke-width:2;
}
.concept-wire {
  stroke:#c2d7f02b;
}
.concept-arrow {
  stroke:color-mix(in srgb,var(--glow-a) 60%,white);
  stroke-linecap:round;
  stroke-linejoin:round;
}
.concept-signal {
  stroke:var(--glow-a);
  stroke-dasharray:12 88;
  stroke-dashoffset:100;
  opacity:0;
  filter:drop-shadow(0 0 5px var(--glow-a));
}
.concept-diagram figcaption {
  position:relative;
  border-top:1px solid #ffffff20;
  padding-top:28px;
}
.concept-example {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:24px;
  align-items:start;
}
.concept-example .section-kicker {
  margin:3px 0 0;
  color:color-mix(in srgb,var(--glow-a) 55%,white);
  font-size:14px;
  letter-spacing:.04em;
}
.concept-example>p {
  font-size:17px;
  color:#c5cddd;
  line-height:1.75;
  max-width:850px;
}
.concept-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  margin-top:28px;
}
.concept-toolbar>p {
  color:#a2adbf;
  font-size:13px;
  line-height:1.7;
  max-width:670px;
}
.concept-replay {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 17px;
  flex:none;
  border:1px solid #c3d6f047;
  border-radius:50px;
  background:#27344c77;
  color:#e2edfd;
  font-size:14px;
  min-height:44px;
}
.concept-replay[hidden] {
  display:none;
}
.concept-replay>span {
  font-size:23px;
  line-height:1;
}
.concept-replay:disabled {
  color:#9aa7bd;
  border-color:#ffffff1c;
}
.concept-node.is-complete .concept-label>span {
  border-color:color-mix(in srgb,var(--glow-a) 65%,transparent);
  background:color-mix(in srgb,var(--glow-a) 22%,#172131);
}
.motion-ready .concept-node.is-active {
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--glow-a) 75%,white);
  box-shadow:0 24px 45px #0007,0 0 45px -14px color-mix(in srgb,var(--glow-a) 70%,transparent),inset 0 1px #fff4;
}
.motion-ready .concept-link.is-active .concept-signal {
  animation:concept-travel 1.15s var(--ease) both;
}
.motion-ready .concept-node.is-active .concept-label>span {
  color:#fff;
  border-color:color-mix(in srgb,var(--glow-a) 70%,white);
  background:linear-gradient(135deg,color-mix(in srgb,var(--glow-a) 80%,#14243a),color-mix(in srgb,var(--glow-b) 65%,#14243a));
  box-shadow:0 0 24px -4px color-mix(in srgb,var(--glow-a) 65%,transparent),inset 0 1px #fff5;
}
.concept-link.is-complete .concept-wire {
  stroke:color-mix(in srgb,var(--glow-a) 45%,transparent);
}
@keyframes concept-travel {
  0% {
    stroke-dashoffset:100;
    opacity:0;
  }
  15% {
    opacity:1;
  }
  85% {
    opacity:1;
  }
  100% {
    stroke-dashoffset:-12;
    opacity:0;
  }
}
@media(hover:hover) and (pointer:fine) {
  .motion-ready .engagement-options>article:hover,.motion-ready .feature-list article:hover,.motion-ready .suite-symbols a:hover {
    transform:translateY(-5px);
    box-shadow:0 22px 45px #0005,0 12px 60px -28px color-mix(in srgb,var(--card-a) 75%,transparent);
  }
  .concept-replay:not(:disabled):hover {
    border-color:var(--glow-a);
    background:#30415c99;
  }
}
/* Give larger supporting text room to breathe, including within product previews. */
.ui-chrome {
  flex-wrap:wrap;
  gap:10px;
}
.ui-heading {
  align-items:flex-start;
}
.ui-heading h3 {
  line-height:1.25;
}
.ui-breadcrumb {
  line-height:1.6;
}
.ui-bottom,.product-flow-labels {
  flex-wrap:wrap;
}
.ui-avatar {
  width:29px;
  height:29px;
}
.ai-mark {
  flex:none;
}
.ai-answer>div {
  min-width:0;
}
.source-chips span {
  line-height:1.5;
}
.interface-card {
  padding-bottom:90px;
}
.ui-metrics strong {
  white-space:nowrap;
}
.ui-field {
  padding-right:30px;
}
.ui-field b {
  line-height:1.5;
}
.operations-chart>div:first-child {
  flex-wrap:wrap;
  margin-bottom:12px;
}
.chart-bars {
  gap:8px;
}
.chart-labels {
  gap:4px;
}
.product-ui figcaption {
  line-height:1.65;
}
.floating-status small {
  letter-spacing:.04em;
}
.device-caption {
  line-height:1.8;
}
.hero-disciplines {
  flex-wrap:wrap;
  gap:14px 24px;
}
.case-art:has(>.product-ui),.case-study:first-child .case-art {
  aspect-ratio:auto;
  min-height:480px;
}
.case-study:first-child .case-art {
  padding:60px 15%;
}
.product-flow-labels span {
  min-width:0;
}
.footer-bottom {
  align-items:flex-start;
}
.footer-bottom>span {
  max-width:430px;
  line-height:1.7;
}
.footer-bottom>div {
  justify-content:flex-end;
  row-gap:14px;
}
@container(max-width:360px) {
  .ui-avatar {
    display:none;
  }
  .ui-chrome {
    padding:12px 14px;
    column-gap:8px;
  }
  .ui-brand {
    letter-spacing:.02em;
    gap:5px;
  }
  .ui-brand .ui-brand-logo {
    width:90px;
  }
  .ui-concept {
    font-size:13px;
  }
  .signature-preview {
    grid-template-columns:1fr;
  }
  .signature-preview aside {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:9px 14px;
  }
  .signature-preview aside p {
    margin:0;
  }
  .signature-preview .ui-pill,.verified-seal {
    flex-basis:100%;
  }
  .signature-preview .verified-seal {
    margin-top:8px;
  }
  .ai-answer {
    display:block;
  }
  .ai-mark {
    display:block;
    margin-bottom:13px;
  }
  .energy-metrics {
    flex-wrap:wrap;
  }
  .energy-metrics .sun-graphic {
    display:none;
  }
  .chart-labels {
    font-size:12px;
  }
  .community-cards strong,.community-cards small {
    line-height:1.6;
  }
}
@container(max-width:340px) {
  .ui-metrics {
    grid-template-columns:1fr;
    gap:8px;
  }
  .ui-metrics>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 13px;
  }
  .ui-metrics small {
    font-size:13px;
    max-width:55%;
  }
  .product-ui .ui-metrics strong {
    font-size:25px;
    margin:0;
  }
  .ui-metrics strong em {
    font-size:13px;
  }
  .ui-metrics span {
    display:none;
  }
  .operations-chart .chart-labels span:nth-child(even) {
    display:none;
  }
}
@media(max-width:1100px) {
  .concept-flow {
    grid-template-columns:minmax(0,1fr) 35px minmax(0,1.1fr) 35px minmax(0,1fr);
  }
  .concept-diagram {
    padding:36px 24px 26px;
  }
  .concept-node {
    padding:23px 18px;
  }
  .concept-node h3 {
    font-size:22px;
  }
  .concept-records li {
    font-size:14px;
  }
  .concept-label {
    gap:7px;
    font-size:12px;
  }
  .concept-steps li {
    font-size:13px;
  }
}
@media(max-width:900px) {
  .concept-flow {
    grid-template-columns:minmax(0,1fr);
    max-width:610px;
    margin:auto;
  }
  .concept-node {
    padding:27px;
  }
  .concept-node h3 {
    font-size:27px;
  }
  .concept-label {
    font-size:14px;
    margin-bottom:20px;
  }
  .concept-records {
    grid-template-columns:1fr 1fr;
    gap:22px;
  }
  .concept-records li {
    font-size:15px;
  }
  .concept-engine-icon {
    float:right;
    margin:0 0 16px 20px;
  }
  .concept-engine h3 {
    max-width:380px;
  }
  .concept-steps {
    clear:both;
  }
  .concept-steps li {
    font-size:15px;
  }
  .concept-link {
    width:24px;
    height:58px;
    justify-self:center;
    display:grid;
    place-items:center;
    padding:0;
  }
  .concept-link svg {
    width:48px;
    transform:rotate(90deg);
  }
  .concept-toolbar {
    align-items:flex-start;
  }
  .product-concept .section-head>p {
    padding-top:0;
  }
  .concept-example {
    grid-template-columns:1fr;
    gap:12px;
  }
}
@media(max-width:780px) {
  .form-grid label>span {
    font-size:15px;
  }
  .form-action p,.brief-note,.form-status {
    font-size:14px;
  }
  .wide-editorial figcaption {
    font-size:13px;
  }
  .footer-bottom {
    flex-direction:column;
  }
  .footer-bottom>div {
    justify-content:flex-start;
  }
  .case-art:has(>.product-ui),.case-study:first-child .case-art {
    min-height:0;
  }
  .case-study:first-child .case-art {
    padding:28px 20px;
  }
  .hero-disciplines {
    gap:10px 15px;
  }
  .concept-diagram {
    padding:28px 20px 24px;
    border-radius:22px;
  }
  .concept-toolbar {
    flex-direction:column;
    gap:18px;
  }
}
@media(max-width:520px) {
  .concept-node {
    padding:24px 20px;
    border-radius:16px;
  }
  .concept-node h3 {
    font-size:25px;
  }
  .concept-records {
    grid-template-columns:1fr;
    gap:14px;
  }
  .concept-engine-icon {
    float:none;
    margin:0 0 20px;
    width:54px;
    height:54px;
  }
  .concept-example>p {
    font-size:16px;
  }
  .concept-diagram {
    padding:25px 16px 22px;
  }
  .concept-flow {
    padding-top:0;
    padding-bottom:30px;
  }
  .concept-label {
    font-size:13px;
  }
  .concept-steps li {
    font-size:14px;
  }
  .concept-records li {
    font-size:15px;
  }
  .system-map-core small {
    font-size:13px;
  }
  .floating-status {
    max-width:310px;
  }
  .floating-status strong {
    font-size:16px;
  }
  .hero-disciplines i {
    display:none;
  }
  .product-flow-labels {
    justify-content:center;
    font-size:13px;
  }
  .feature-list p {
    font-size:16px;
  }
}
@media(max-width:380px) {
  .site-header {
    padding-inline:16px;
    gap:8px;
  }
  .brand img {
    width:88px;
  }
  .header-cta {
    font-size:13px;
    padding:8px 10px;
  }
  .header-cta span {
    margin-left:5px;
  }
  .menu-toggle {
    width:36px;
    height:44px;
  }
  .concept-diagram {
    padding:20px 12px;
  }
  .concept-node {
    padding:21px 16px;
  }
  .concept-node h3 {
    font-size:23px;
  }
}
@media(prefers-reduced-motion:reduce) {
  .concept-node,.concept-signal {
    animation:none!important;
    transform:none!important;
  }
}