:root {
  color-scheme: dark;
  --night: #050b14;
  --ocean-900: #071424;
  --ocean-800: #0b1f3a;
  --ocean-700: #102845;
  --graphite: #0b1017;
  --graphite-2: #141b24;
  --nav-blue: #315f86;
  --cyan: #8fd3f4;
  --cyan-soft: #c1e7f7;
  --silver: #d6dee6;
  --muted: #aab4bf;
  --steel: #748494;
  --line: rgba(170, 214, 238, 0.18);
  --panel: rgba(9, 27, 47, 0.72);
  --panel-strong: rgba(10, 31, 56, 0.9);
  --warm: #ff6a00;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.34);
  --max: 1180px
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--oct-menu-size) * 2)
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -2;
  content: "";
  background: linear-gradient(140deg,rgba(5,11,20,.98),rgba(8,26,47,.96) 45%,rgba(6,16,29,.98)),repeating-linear-gradient(90deg,rgba(99,199,255,.03) 0 1px,transparent 1px 96px),repeating-linear-gradient(0deg,rgba(99,199,255,.025) 0 1px,transparent 1px 96px)
}
a {
  color: inherit;
  text-decoration: none
}
button,
select {
  font: inherit
}
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(18px);
  transition: background 180ms,border-color 180ms;
  backdrop-filter: blur(18px)
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0
}
.brand-icon {
  display: grid;
  place-items: center;
  overflow: visible;
  border-radius: 0
}
.brand-icon.small {
  width: 34px;
  height: 34px
}
.brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain
}
.brand-copy {
  display: grid;
  gap: 2px
}
.brand-name {
  font-weight: 700;
  color: #f4f8fb
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px
}
.nav-actions,
.nav-group {
  display: flex;
  align-items: center;
  gap: 8px
}
.nav-item {
  position: relative
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap
}
.contact-link:hover,
.lang-toggle:hover,
.nav-link:focus-visible,
.nav-link:hover {
  color: #fff;
  color: var(--ink)
}
.nav-caret {
  width: 7px;
  height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px)
}
.contact-link,
.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(170,214,238,.2)
}
.mega-panel {
  position: absolute;
  left: 50%;
  display: grid;
  grid-template-columns: minmax(270px,0.9fr) minmax(360px,1.2fr);
  gap: 28px;
  width: min(760px,calc(100vw - 72px));
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(170,214,238,.18);
  box-shadow: var(--shadow);
  transform: translate(-50%,8px);
  transition: opacity 160ms,transform 160ms,visibility 160ms
}
.has-mega.is-open .mega-panel,
.has-mega:focus-within .mega-panel,
.has-mega:hover .mega-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%,0)
}
.mega-intro {
  padding: 4px 6px
}
.mega-label,
.section-kicker {
  margin: 0 0 12px;
  color: var(--cyan);
  font-size: 13px;
  font-weight: 700
}
.mega-intro h2 {
  margin: 0 0 14px;
  color: #f7fbff;
  font-size: 22px;
  line-height: 1.35
}
.enterprise-copy p,
.mega-intro p:last-child,
.section-heading p {
  margin: 0;
  color: var(--muted);
  line-height: 1.82
}
.mega-list {
  display: grid;
  gap: 8px
}
.mega-list a {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(170,214,238,.12);
  border-radius: 8px
}
.mega-list a:focus-visible,
.mega-list a:hover {
  border-color: rgba(99,199,255,.44)
}
.mega-list strong {
  color: #f4f8fb;
  font-size: 14px
}
.mega-list span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(170,214,238,.22);
  border-radius: 8px;
  background: rgba(9,27,47,.76)
}
.menu-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  margin: 5px auto;
  background: var(--silver)
}
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate
}
.hero::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background: repeating-linear-gradient(90deg,rgba(214,222,230,.04) 0 1px,transparent 1px 120px),repeating-linear-gradient(0deg,rgba(214,222,230,.028) 0 1px,transparent 1px 120px);
  mask-image: linear-gradient(90deg,rgba(0,0,0,0.96),rgba(0,0,0,0.62) 62%,rgba(0,0,0,0.2))
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .74;
  filter: grayscale(.92) contrast(1.08) brightness(.58) saturate(.62);
  transform: scale(1.02)
}
.hero-content {
  transform: translateX(-210px)
}
.hero h1 {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: normal
}
.hero h1 span {
  white-space: nowrap
}
.section {
  position: relative
}
.section-panel {
  background: linear-gradient(135deg,rgba(11,31,58,.8),rgba(5,11,20,.92)),repeating-linear-gradient(90deg,rgba(214,222,230,.035) 0 1px,transparent 1px 120px)
}
.section-inner {
  width: min(var(--max),100%)
}
.section-heading.compact {
  margin-bottom: 0
}
.enterprise-copy h2,
.section-heading h2,
.two-column h2 {
  margin: 0 0 18px;
  color: #f7fbff
}
.assets-layout,
.enterprise-layout,
.two-column {
  display: grid;
  align-items: center;
  gap: 56px
}
.enterprise-layout,
.two-column {
  grid-template-columns: minmax(0,1fr) minmax(360px,0.92fr)
}
.assets-layout {
  grid-template-columns: minmax(320px,0.82fr) minmax(0,1.18fr)
}
@media (max-width:1120px) {
  .site-header {
    padding: 0 22px
  }
  .site-nav {
    gap: 14px
  }
  .nav-link {
    padding: 0 8px
  }
  .hero-content {
    transform: none
  }
}
@media (max-width:920px) {
  .site-header {
    height: 68px
  }
  .menu-toggle {
    display: block
  }
  .site-nav {
    position: fixed;
    top: 68px;
    left: 12px;
    right: 12px;
    display: none;
    max-height: calc(100vh - 84px);
    padding: 12px;
    overflow: auto;
    border: 1px solid rgba(170,214,238,.16);
    border-radius: 8px;
    background: rgba(5,11,20,.98);
    box-shadow: var(--shadow)
  }
  .site-nav.is-open {
    display: grid;
    gap: 12px
  }
  .nav-actions,
  .nav-group {
    display: grid;
    gap: 8px
  }
  .contact-link,
  .lang-toggle,
  .nav-link {
    width: 100%;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(170,214,238,.12);
    border-radius: 8px;
    background: rgba(16,40,69,.35)
  }
  .mega-panel {
    position: static;
    display: none;
    width: 100%;
    padding: 16px;
    grid-template-columns: 1fr;
    transform: none;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none
  }
  .has-mega.is-open .mega-panel {
    display: grid;
    transform: none
  }
  .has-mega:focus-within .mega-panel,
  .has-mega:hover .mega-panel {
    transform: none
  }
  .hero {
    min-height: 88vh;
    padding: 120px 22px 72px
  }
  .hero h1 {
    font-size: 42px
  }
  .hero-copy {
    font-size: 16px
  }
  .section {
    padding: 82px 22px
  }
  .assets-layout,
  .enterprise-layout,
  .two-column {
    grid-template-columns: 1fr
  }
  .enterprise-copy h2,
  .section-heading h2,
  .two-column h2 {
    font-size: 34px
  }
}
.assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 650
}
.assistant-chat-window {
  height: 284px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);
  mask-image: linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)
}
.assistant-chat-track {
  animation: 12s linear infinite assistantChatScroll;
  will-change: transform
}
.assistant-chat-set {
  height: 284px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 24px 20px
}
.chat-row {
  width: fit-content;
  max-width: 82%;
  display: flex;
  align-items: flex-start;
  gap: 9px
}
.chat-row > span {
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  color: rgba(247,247,243,.55);
  font-size: 8px;
  font-weight: 760
}
.chat-row p {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  color: rgba(247,247,243,.76);
  background: rgba(255,255,255,.045);
  font-size: 11px;
  line-height: 1.5
}
.chat-row-user {
  align-self: flex-end;
  flex-direction: row-reverse
}
.chat-row-octant > span {
  color: #15171b;
  border-color: var(--oct-orange);
  background: var(--oct-orange)
}
.chat-row-octant p {
  color: rgba(247,247,243,.92);
  border-color: rgba(239,107,46,.18)
}
@keyframes assistantChatScroll {
  from {
    transform: translateY(0)
  }
  to {
    transform: translateY(-50%)
  }
}
@keyframes mailLetterCycle {
  0%,
  8% {
    opacity: 0;
    transform: translate(-50%,-10px)
  }
  16%,
  38% {
    opacity: 1;
    transform: translate(-50%,0)
  }
  100%,
  52% {
    opacity: 0;
    transform: translate(-50%,92px) scale(.88)
  }
}
@keyframes mailEnvelopeCycle {
  0%,
  45% {
    transform: translateX(-50%)
  }
  58%,
  74% {
    transform: translateX(calc(-50% + 34px))
  }
  100%,
  88% {
    transform: translateX(calc(-50% + 34px));
    opacity: 0
  }
}
@keyframes mailSendCycle {
  0%,
  54% {
    transform: translateX(-24px);
    opacity: 0
  }
  62% {
    opacity: 1
  }
  76% {
    transform: translateX(104px);
    opacity: 1
  }
  100%,
  80% {
    transform: translateX(104px);
    opacity: 0
  }
}
@keyframes mailSentCycle {
  0%,
  70% {
    opacity: 0;
    transform: translateX(-5px)
  }
  78%,
  90% {
    opacity: 1;
    transform: translateX(0)
  }
  100% {
    opacity: 0
  }
}
@media (max-width:720px) {
  .solution-mock-assistant {
    height: 310px
  }
  .assistant-chat-set,
  .assistant-chat-window {
    height: 264px
  }
  .assistant-chat-set {
    padding: 18px 14px
  }
  .chat-row {
    max-width: 88%
  }
}
.about-audience {
  display: grid;
  grid-template-columns: minmax(240px,0.5fr) minmax(0,1.5fr);
  column-gap: 72px;
  padding: 34px 0;
  border-top: 1px solid var(--oct-line-strong)
}
@media (max-width:900px) {
  .about-audience {
    grid-template-columns: 1fr;
    row-gap: 28px
  }
}
@media (max-width:620px) {
  .site-header {
    padding: 0 14px
  }
  .brand-name {
    font-size: 15px
  }
  .hero {
    min-height: 86vh;
    padding: 108px 16px 56px
  }
  .hero h1 {
    font-size: 34px
  }
  .section {
    padding: 68px 16px
  }
  .enterprise-copy h2,
  .section-heading h2,
  .two-column h2 {
    font-size: 28px
  }
}
@media (prefers-reduced-motion:reduce) {
  .assistant-chat-track {
    animation: none
  }
  html {
    scroll-behavior: auto
  }
  *,
  ::after,
  ::before {
    animation-duration: 0s!important;
    animation-iteration-count: 1!important;
    transition-duration: 0s!important
  }
}
.sketch-workflow {
  min-height: 390px;
  display: grid;
  align-content: center
}
.sketch-workflow-canvas {
  width: 100%;
  height: auto;
  overflow: visible
}
.sketch-workflow-canvas path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}
.sketch-guide {
  stroke: rgba(16,24,33,.12);
  stroke-width: 1.2
}
.sketch-progress {
  stroke: var(--oct-orange);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: 7s ease-in-out infinite sketchProgress
}
.sketch-stage path {
  stroke: rgba(16,24,33,.82);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1
}
.sketch-question {
  animation: 7s linear infinite sketchQuestion
}
.sketch-bulb {
  animation: 7s linear infinite sketchBulb
}
.sketch-design-paper {
  animation: 7s linear infinite sketchDesignPaper
}
.sketch-design-pen {
  animation: 7s linear infinite sketchDesignPen
}
.sketch-build-frame {
  animation: 7s linear infinite sketchBuildFrame
}
.sketch-build-code {
  animation: 7s linear infinite sketchBuildCode
}
.sketch-gear {
  animation: 7s linear infinite sketchGear
}
.sketch-monitor {
  animation: 7s linear infinite sketchMonitor
}
.sketch-workflow-labels {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: -6px
}
.sketch-workflow-labels span {
  min-width: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 9px;
  padding-top: 12px;
  border-top: 1px solid rgba(16,24,33,.12)
}
.sketch-workflow-labels b {
  grid-row: 1/3;
  color: var(--oct-orange-dark);
  font-size: 9px
}
.sketch-workflow-labels strong {
  color: var(--oct-ink);
  font-size: 13px
}
.sketch-workflow-labels small {
  margin-top: 4px;
  color: var(--oct-ink-muted);
  font-size: 9px
}
@keyframes sketchQuestion {
  0%,
  3% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  12%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchBulb {
  0%,
  10% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  23%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchDesignPaper {
  0%,
  22% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  37%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchDesignPen {
  0%,
  32% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  45%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchBuildFrame {
  0%,
  43% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  58%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchBuildCode {
  0%,
  54% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  65%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchGear {
  0%,
  64% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  77%,
  92% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchMonitor {
  0%,
  73% {
    stroke-dashoffset: 1;
    opacity: 0
  }
  87%,
  94% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: 0
  }
}
@keyframes sketchProgress {
  0%,
  8% {
    stroke-dashoffset: 1
  }
  87%,
  94% {
    stroke-dashoffset: 0
  }
  100% {
    stroke-dashoffset: -1
  }
}
@media (max-width:720px) {
  .sketch-workflow {
    min-height: 330px
  }
  .sketch-workflow-labels {
    gap: 7px
  }
  .sketch-workflow-labels span {
    column-gap: 5px
  }
  .sketch-workflow-labels small {
    font-size: 8px
  }
  #assets .asset-module-card {
    min-height: 164px;
    padding: 22px 20px
  }
  #assets .asset-module-card h3 {
    margin-top: 18px;
    font-size: 17px
  }
}
@media (prefers-reduced-motion:reduce) {
  .sketch-progress,
  .sketch-stage path {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1
  }
}
:root {
  color-scheme: light;
  --paper: #f4f1ea;
  --paper-2: #e8ebe8;
  --mist: #d9ddda;
  --ink: #191714;
  --ink-soft: #4d4f4c;
  --line-soft: rgba(25, 23, 20, 0.14);
  --line-strong: rgba(25, 23, 20, 0.28);
  --blue-link: #245f7a;
  --panel-light: rgba(255, 255, 255, 0.58);
  --graphite-panel: #20242a
}
body {
  margin: 0;
  color: var(--silver);
  background: var(--night);
  letter-spacing: 0;
  color: var(--ink);
  background: var(--paper);
  background: var(--oc-ocean-950);
  color: var(--oct-ink);
  background: var(--oct-paper);
  font-family: Inter,"SF Pro Display","SF Pro Text","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility
}
.brand-icon {
  background: 0 0;
  border: 0;
  box-shadow: none
}
.brand-name {
  color: var(--ink)
}
.contact-link,
.lang-toggle {
  border-color: var(--line-soft)
}
.contact-link {
  background: var(--ink);
  border-color: var(--ink)
}
.mega-panel {
  border-color: var(--line-soft);
  box-shadow: 0 28px 70px rgba(25,23,20,.12)
}
.mega-label,
.section-kicker {
  color: var(--blue-link)
}
.mega-intro h2 {
  color: var(--ink)
}
.enterprise-copy p,
.mega-intro p:last-child,
.mega-list span,
.section-heading p,
.two-column p {
  color: var(--ink-soft)
}
.mega-list a {
  border-color: var(--line-soft);
  background: rgba(255,255,255,.48)
}
.mega-list a:focus-visible,
.mega-list a:hover {
  border-color: var(--line-strong);
  background: #fff
}
.mega-list strong {
  color: var(--ink)
}
.hero {
  background: var(--paper-2)
}
.hero-video {
  z-index: -2;
  opacity: .58;
  filter: grayscale(1) contrast(1.08) brightness(1.06) saturate(.48);
  mix-blend-mode: multiply;
  opacity: .86;
  filter: grayscale(1) contrast(1.18) brightness(1.12) saturate(.52);
  opacity: .92;
  filter: grayscale(1) contrast(1.34) brightness(1.18) saturate(.58);
  mix-blend-mode: multiply
}
.hero-content {
  margin: 0 auto;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}
.hero h1 {
  display: inline-block;
  border-radius: 12px;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 22px 54px rgba(25,23,20,.1);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%)
}
.hero-copy {
  margin: 26px auto 0;
  color: var(--ink);
  text-align: center
}
.hero-copy a {
  color: var(--blue-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em
}
.hero-pills-strip {
  position: sticky;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 12px 30px rgba(25,23,20,.08)
}
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: min(var(--max),100%);
  margin: 0 auto
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  border-right: 1px solid rgba(25,23,20,.16);
  font-weight: 600;
  text-decoration: none;
  box-shadow: none
}
.hero-pill:last-child {
  border-right: 0
}
a.hero-pill:focus-visible,
a.hero-pill:hover {
  transform: none;
  color: #1d1d1f;
  background: rgba(0,0,0,.055)
}
.section {
  padding: 118px 36px
}
.section-panel {
  background: var(--paper)
}
.section-heading {
  margin-bottom: 48px
}
.enterprise-copy h2,
.section-heading h2,
.two-column h2 {
  color: inherit;
  font-size: 52px;
  line-height: 1.08
}
.assets-layout,
.enterprise-layout,
.two-column {
  grid-template-columns: minmax(0,0.9fr) minmax(420px,1.1fr);
  gap: 76px
}
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: var(--paper)
}
@keyframes codeReveal {
  0% {
    opacity: 0;
    transform: translateX(-8px)
  }
  12%,
  72% {
    opacity: 1;
    transform: translateX(0)
  }
  100% {
    opacity: .24;
    transform: translateX(0)
  }
}
@keyframes caretBlink {
  0%,
  45% {
    opacity: 1
  }
  100%,
  46% {
    opacity: 0
  }
}
@keyframes stageDrift {
  0%,
  100% {
    transform: rotateX(58deg) rotateZ(-38deg) translateY(0)
  }
  50% {
    transform: rotateX(58deg) rotateZ(-32deg) translateY(-10px)
  }
}
@keyframes blockFloat {
  0%,
  100% {
    transform: translateZ(0)
  }
  50% {
    transform: translateZ(36px)
  }
}
@keyframes shelfSlide {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-50%)
  }
}
@media (max-width:920px) {
  .site-header {
    padding: 0 18px
  }
  .site-nav {
    background: rgba(244,241,234,.98);
    border-color: var(--line-soft)
  }
  .contact-link,
  .lang-toggle,
  .nav-link {
    border-color: var(--line-soft);
    background: rgba(255,255,255,.52)
  }
  .contact-link {
    background: var(--ink)
  }
  .mega-panel {
    background: rgba(255,255,255,.56)
  }
  .hero {
    padding: 116px 22px 76px
  }
  .hero h1 {
    font-size: 48px
  }
  .hero-copy {
    font-size: 20px
  }
  .section {
    padding: 86px 22px
  }
  .assets-layout,
  .enterprise-layout,
  .two-column {
    grid-template-columns: 1fr
  }
  .enterprise-copy h2,
  .section-heading h2,
  .two-column h2 {
    font-size: 40px
  }
}
@media (max-width:620px) {
  .hero h1 {
    font-size: 38px
  }
  .hero-copy {
    font-size: 18px
  }
  .enterprise-copy h2,
  .section-heading h2,
  .two-column h2 {
    font-size: 32px
  }
}
@media (min-width:921px) {
  .site-nav {
    flex: 1;
    justify-content: flex-end
  }
  .nav-group {
    position: absolute;
    left: 50%;
    transform: translateX(-50%)
  }
  .nav-actions {
    margin-left: auto
  }
  .has-mega::after {
    position: absolute;
    top: 100%;
    left: -18px;
    right: -18px;
    height: 34px;
    content: ""
  }
  .has-mega:focus-within:not(:hover):not(.is-open) .mega-panel {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%,8px)
  }
}
.hero-content {
  padding-top: 18px
}
#platform .section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  margin-bottom: 18px;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: rgba(255,255,255,.56);
  font-size: 18px;
  font-weight: 800
}
@keyframes drawDeliveryLine {
  0% {
    stroke-dashoffset: 850;
    opacity: .4
  }
  18%,
  70% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -850;
    opacity: .45
  }
}
@keyframes stageQuestion {
  0%,
  12% {
    opacity: 1;
    transform: scale(1)
  }
  100%,
  24% {
    opacity: .36;
    transform: scale(.88)
  }
}
@keyframes stageIdea {
  0%,
  12% {
    opacity: 0;
    transform: translateY(10px) scale(.82)
  }
  23%,
  52% {
    opacity: 1;
    transform: translateY(0) scale(1)
  }
  100%,
  78% {
    opacity: .55;
    transform: translateY(0) scale(.94)
  }
}
@keyframes stageCode {
  0%,
  30% {
    opacity: 0;
    transform: translateX(-12px)
  }
  42%,
  76% {
    opacity: 1;
    transform: translateX(0)
  }
  100% {
    opacity: .55;
    transform: translateX(0)
  }
}
@keyframes stageProgram {
  0%,
  52% {
    opacity: 0;
    transform: translateX(-10px) scale(.9)
  }
  66%,
  92% {
    opacity: 1;
    transform: translateX(0) scale(1)
  }
  100% {
    opacity: .55;
    transform: translateX(0) scale(.96)
  }
}
@keyframes forceNodeFloat {
  0%,
  100% {
    transform: translate(0,0)
  }
  50% {
    transform: translate(8px,-12px)
  }
}
@keyframes edgePulse {
  0%,
  100% {
    opacity: .38
  }
  50% {
    opacity: 1
  }
}
@media (max-width:920px) {
  .nav-group {
    position: static;
    transform: none
  }
}
.site-header {
  height: 54px;
  padding: 0 max(34px,calc((100% - var(--max))/ 2));
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px)
}
.site-header .brand-icon {
  width: 42px;
  height: 42px
}
.lang-toggle,
.nav-link {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  color: rgba(29,29,31,.86);
  background: 0 0
}
.lang-toggle:focus-visible,
.lang-toggle:hover,
.nav-link:focus-visible,
.nav-link:hover {
  background: rgba(0,0,0,.055)
}
.contact-link {
  padding: 0 14px
}
.mega-panel {
  top: calc(100% + 10px);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px)
}
.has-mega::after {
  bottom: -24px;
  height: 28px
}
.hero {
  min-height: 66vh;
  padding: 128px 36px 84px;
  isolation: isolate;
  background: #e6e9e7
}
.hero-copy {
  display: block;
  box-shadow: 0 22px 54px rgba(25,23,20,.1);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%)
}
#enterprise {
  isolation: isolate;
  background: #20242a;
  isolation: isolate;
  color: var(--oc-ocean-900);
  background: radial-gradient(120% 90% at 30% 8%,rgba(255,255,255,.5),transparent 56%),linear-gradient(180deg,#edece7 0,#e6e4df 60%,#dedcd6 100%)
}
#enterprise::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background: linear-gradient(180deg,rgba(32,36,42,.62),rgba(32,36,42,.96)),repeating-linear-gradient(90deg,transparent 0 42px,rgba(255,255,255,.08) 42px 43px,transparent 43px 86px),repeating-linear-gradient(0deg,transparent 0 32px,rgba(255,255,255,.06) 32px 33px,transparent 33px 66px),linear-gradient(135deg,#1f252b,#343a3f)
}
#enterprise .section-inner {
  position: relative;
  z-index: 1
}
#enterprise .section-kicker,
#solutions .section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px;
  color: #fff;
  font-size: 18px;
  font-weight: 800
}
.asset-module-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  min-width: 0
}
.asset-module-card {
  border: 1px solid var(--line-soft);
  box-shadow: 0 20px 52px rgba(25,23,20,.08)
}
.asset-module-card:nth-child(2) {
  background: #edf4f7
}
.asset-module-card:nth-child(3) {
  background: #f6f0df
}
.asset-module-card:nth-child(4) {
  background: #e7ece8
}
.asset-module-card:nth-child(5) {
  background: #f1e8e2
}
.asset-module-card:nth-child(6) {
  background: #e8edf2
}
.asset-module-card:focus-within,
.asset-module-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 26px 64px rgba(25,23,20,.12)
}
.asset-module-card span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid rgba(25,23,20,.14);
  border-radius: 8px;
  color: var(--blue-link);
  background: rgba(255,255,255,.58);
  font-weight: 800
}
.asset-module-card h3 {
  margin: 0 0 12px;
  color: var(--ink)
}
.asset-module-card p {
  margin: 0;
  color: var(--ink-soft)
}
#solutions {
  color: var(--ink);
  background: #d9ded8;
  background: var(--oc-mist);
  position: relative;
  isolation: isolate;
  padding-top: 64px;
  padding-bottom: 0;
  color: var(--oc-ocean-900);
  background: radial-gradient(120% 90% at 70% 6%,rgba(255,255,255,.55),transparent 54%),linear-gradient(180deg,#edece7 0,#e6e4df 60%,#dedcd6 100%)
}
#solutions .section-kicker {
  color: var(--ink);
  border-color: var(--line-soft)
}
.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background: rgba(25,23,20,.42);
  transition: opacity 180ms,visibility 180ms
}
.contact-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto
}
.contact-modal-panel {
  position: relative;
  width: min(820px,100%);
  max-height: min(92vh,900px);
  padding: 34px;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(251,251,253,.92);
  box-shadow: 0 34px 90px rgba(25,23,20,.2);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%)
}
.contact-modal-panel h2 {
  margin: 0;
  font-size: 34px;
  line-height: 1.18
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  border: 0;
  border-radius: 50%;
  background: rgba(25,23,20,.08)
}
.modal-close::after,
.modal-close::before {
  position: absolute;
  top: 17px;
  left: 10px;
  width: 16px;
  height: 2px;
  content: "";
  background: var(--ink)
}
.modal-close::before {
  transform: rotate(45deg)
}
.modal-close::after {
  transform: rotate(-45deg)
}
.contact-method-grid {
  display: grid;
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  gap: 14px;
  margin-top: 24px
}
.contact-info-card,
.contact-form-card {
  padding: 18px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,255,255,.66)
}
.contact-info-card > span,
.contact-form-card > span {
  display: block;
  margin-bottom: 10px;
  color: var(--ink);
  font-weight: 800
}
.contact-info-card > p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7
}
.contact-channel-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none
}
.contact-channel-list:empty {
  display: none
}
.contact-channel-list li {
  display: grid;
  gap: 2px
}
.contact-channel-list span {
  color: var(--ink-muted, rgba(17,24,39,.46));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em
}
.contact-channel-list a,
.contact-channel-list strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  word-break: break-all
}
.contact-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px 14px;
  margin-top: 4px
}
.contact-form label {
  display: grid;
  gap: 6px
}
.contact-form label > span {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700
}
.contact-form label > span em {
  margin-left: 6px;
  color: var(--ink-muted, rgba(17,24,39,.46));
  font-style: normal;
  font-weight: 600
}
.contact-form-spacer {
  display: none
}
@media (min-width: 721px) {
  .contact-form-spacer {
    display: block;
    visibility: hidden;
    pointer-events: none
  }
}
.contact-form-full,
.contact-form-status,
.contact-form-submit {
  grid-column: 1 / -1
}
.contact-honey {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255,255,255,.92);
  font: inherit;
  line-height: 1.4;
  transition: border-color 160ms ease, box-shadow 160ms ease
}
.contact-form textarea {
  resize: vertical;
  min-height: 96px
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 0;
  border-color: rgba(242,106,33,.55);
  box-shadow: 0 0 0 3px rgba(242,106,33,.14)
}
.contact-form .is-invalid {
  border-color: #c2410c;
  box-shadow: 0 0 0 3px rgba(194,65,12,.12)
}
.contact-form-status {
  min-height: 1.2em;
  margin: 0;
  color: #b45309;
  font-size: 13px;
  line-height: 1.5
}
.contact-form-status.is-ok {
  color: #3f6212
}
.contact-form-submit,
.contact-form-success button {
  justify-self: start;
  padding: 11px 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--oct-orange, #f26a21);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease
}
.contact-form-submit:hover,
.contact-form-submit:focus-visible,
.contact-form-success button:hover,
.contact-form-success button:focus-visible {
  background: var(--oct-orange-dark, #c95018)
}
.contact-form-submit:disabled {
  opacity: .62;
  cursor: wait
}
.contact-form-success {
  display: grid;
  gap: 10px;
  margin-top: 8px
}
.contact-form-success[hidden] {
  display: none
}
.contact-form-success strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 750
}
.contact-form-success p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.7
}
.contact-form-success button {
  margin-top: 6px;
  background: transparent;
  color: var(--oct-orange-dark, #c95018);
  border: 1px solid currentColor;
  border-radius: 999px
}
.contact-form-success button:hover,
.contact-form-success button:focus-visible {
  color: var(--ink);
  background: rgba(17,24,39,.04)
}
.contact-form-card.is-sent .contact-form {
  display: none
}
body.modal-open {
  overflow: hidden
}
@keyframes heroWaveClosed {
  0%,
  100% {
    opacity: .46;
    transform: translate3d(0,0,0) scale(1)
  }
  50% {
    opacity: .95;
    transform: translate3d(-2%,-4%,0) scale(1.06)
  }
}
@keyframes drawDeliveryLine {
  0%,
  100% {
    stroke-dashoffset: 850;
    opacity: .45
  }
  18%,
  72% {
    stroke-dashoffset: 0;
    opacity: 1
  }
}
@media (max-width:920px) {
  .site-header {
    height: 64px;
    padding: 0 18px
  }
  .contact-link,
  .lang-toggle,
  .nav-link {
    border: 1px solid var(--line-soft);
    background: rgba(255,255,255,.52)
  }
  .contact-link {
    color: #fff;
    background: var(--ink)
  }
  .hero-copy {
    padding: 16px
  }
  .asset-module-grid,
  .contact-method-grid {
    grid-template-columns: 1fr
  }
  .contact-form {
    grid-template-columns: 1fr
  }
  .idea-flow-visual {
    min-height: 360px
  }
}
.hero::after {
  display: none!important
}
.hero-video {
  opacity: .9;
  filter: grayscale(1) contrast(1.18) brightness(1.05) saturate(.66);
  mix-blend-mode: normal;
  display: block;
  opacity: .42;
  filter: grayscale(1) invert(1) contrast(.92) brightness(1.06);
  mix-blend-mode: multiply
}
.idea-flow-visual {
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(25,23,20,.08)
}
@keyframes ideaSketchDraw {
  0%,
  100% {
    stroke-dashoffset: 880;
    opacity: .22
  }
  18%,
  76% {
    stroke-dashoffset: 0;
    opacity: 1
  }
}
@keyframes ideaFlowDot {
  0%,
  100% {
    transform: translate(80px,192px);
    opacity: 0
  }
  16% {
    transform: translate(138px,214px);
    opacity: 1
  }
  34% {
    transform: translate(260px,200px);
    opacity: 1
  }
  56% {
    transform: translate(430px,188px);
    opacity: 1
  }
  78% {
    transform: translate(588px,196px);
    opacity: 1
  }
}
@keyframes graphNodeFloat {
  0%,
  100% {
    transform: translate3d(0,0,20px)
  }
  50% {
    transform: translate3d(0,-22px,48px)
  }
}
@keyframes graphLinePulse {
  0%,
  100% {
    opacity: .28
  }
  50% {
    opacity: .86
  }
}
@keyframes singleStrokeDraw {
  0%,
  100% {
    stroke-dashoffset: 1;
    opacity: .26
  }
  16%,
  74% {
    stroke-dashoffset: 0;
    opacity: 1
  }
}
@keyframes graphNodeBreathe {
  0%,
  100% {
    filter: brightness(1)
  }
  50% {
    filter: brightness(1.06)
  }
}
.nav-link {
  font-weight: 650
}
.contact-link,
.lang-toggle {
  font-size: 14px;
  font-weight: 650
}
.hero-copy {
  box-shadow: 0 18px 54px rgba(25,23,20,.12);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px)
}
.hero-copy a {
  color: #245f7a
}
@keyframes sketchStepDraw {
  0%,
  100% {
    stroke-dashoffset: 1;
    opacity: .18
  }
  15%,
  72% {
    stroke-dashoffset: 0;
    opacity: 1
  }
}
@keyframes graphNodeDrift {
  0%,
  100% {
    transform: translate3d(0,0,0);
    filter: brightness(1)
  }
  25% {
    transform: translate3d(4px,-6px,0)
  }
  52% {
    transform: translate3d(-5px,3px,0);
    filter: brightness(1.05)
  }
  76% {
    transform: translate3d(3px,5px,0)
  }
}
@keyframes graphNodeRebound {
  0% {
    transform: scale(1.04) translate3d(0,0,0)
  }
  46% {
    transform: scale(.96) translate3d(-4px,5px,0)
  }
  72% {
    transform: scale(1.02) translate3d(2px,-2px,0)
  }
  100% {
    transform: scale(1) translate3d(0,0,0)
  }
}
@media (max-width:620px) {
  .contact-modal-panel {
    padding: 28px 20px 22px
  }
  .contact-modal-panel h2 {
    font-size: 28px
  }
  .nav-link {
    font-size: 14px
  }
}
.mega-panel {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 28px 70px rgba(25,23,20,.16)
}
.hero-copy {
  box-shadow: 0 24px 70px rgba(25,23,20,.13);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  color: var(--oc-ocean-900);
  box-shadow: 0 22px 54px rgba(40,38,33,.12)
}
#assets .section-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--ink);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(25,23,20,.08);
  font-size: 18px;
  font-weight: 850;
  margin-bottom: clamp(28px,4.2vw,54px)
}
@keyframes wuhanGlow {
  0%,
  100% {
    opacity: .2;
    transform: scale(.7)
  }
  48% {
    opacity: .86;
    transform: scale(1.08)
  }
}
@keyframes wuhanRing {
  0% {
    opacity: .9;
    transform: scale(.6)
  }
  70% {
    opacity: .12;
    transform: scale(2.6)
  }
  100% {
    opacity: 0;
    transform: scale(3)
  }
}
@keyframes rayFlight {
  0% {
    opacity: 0;
    stroke-dashoffset: 1
  }
  24% {
    opacity: 1
  }
  72% {
    opacity: .88;
    stroke-dashoffset: 0
  }
  100% {
    opacity: 0;
    stroke-dashoffset: -0.2
  }
}
.hero-content {
  position: relative;
  z-index: 1
}
.hero {
  background: radial-gradient(120% 90% at 70% 24%,rgba(255,255,255,.55),transparent 54%),linear-gradient(180deg,#edece7 0,#e6e4df 46%,#dcdad4 100%);
  min-height: calc(100svh - var(--pills-tall,96px))
}
.hero::before {
  inset: 0;
  content: "";
  position: absolute;
  inset: 0;
  content: "";
  z-index: -1;
  background: radial-gradient(60% 52% at 66% 34%,rgba(255,255,255,.45),transparent 66%),linear-gradient(180deg,rgba(244,241,234,.16),rgba(220,218,212,.34))
}
.hero h1 {
  color: var(--oc-ocean-900);
  box-shadow: 0 24px 70px rgba(40,38,33,.16);
  box-shadow: 0 24px 70px rgba(40,38,33,.1)
}
.hero-copy a {
  color: var(--oc-blue-500)
}
#platform {
  background: var(--oc-mist)
}
#enterprise::before {
  display: none
}
#enterprise .section-kicker {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.56)
}
#enterprise .enterprise-copy h2 {
  color: var(--oc-ocean-900)
}
#enterprise .enterprise-copy p {
  color: var(--ink-soft)
}
.enterprise-graph-frame {
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(4,16,29,.36)
}
.obsidian-graph {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  position: relative;
  z-index: 1
}
#assets {
  background: var(--oc-fog)
}
.site-footer {
  background: var(--oc-ocean-950)
}
.brand-wordmark {
  display: block;
  height: 12px;
  width: auto;
  margin-top: 2px
}
.site-header .brand-wordmark {
  height: 11px
}
.site-header {
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px)
}
.hero h1,
.hero-copy {
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%)
}
.hero-pills-strip {
  top: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pills-tall,96px);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  transition: min-height .3s cubic-bezier(.22, 1, .36, 1),background .3s,box-shadow .3s
}
.hero-pills-strip.is-stuck {
  min-height: 54px
}
.pills-sentinel {
  width: 100%;
  height: 1px;
  margin-bottom: -1px;
  pointer-events: none
}
@supports not (height:100svh) {
  .hero {
    min-height: calc(100vh - var(--pills-tall,96px))
  }
}
.solutions-section {
  padding-bottom: 0
}
.solution-reveal {
  position: relative;
  margin: 46px -50vw 0;
  display: flex;
  justify-content: center
}
.solution-stage {
  position: relative;
  width: 50%;
  overflow: hidden;
  opacity: .5;
  transform: translateY(26px);
  color: var(--oc-text-light);
  box-shadow: 0 30px 90px rgba(4,16,29,.4);
  will-change: width,transform,opacity
}
.solution-reveal.is-open .solution-stage {
  width: 90%
}
.solution-tabs {
  display: flex;
  gap: 6px;
  margin: 0 auto;
  border: 1px solid rgba(234,242,248,.12)
}
.solution-tab {
  font-weight: 700;
  cursor: pointer;
  transition: color 220ms,background 220ms
}
.solution-tab:hover {
  color: #fff
}
.solution-tab.is-active {
  color: var(--oc-ocean-900);
  background: var(--oc-mist)
}
.solution-panels {
  position: relative;
  margin-top: 28px
}
.solution-panel {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(24px,4vw,64px);
  align-items: end;
  width: min(var(--max),100%);
  margin: 0 auto
}
.solution-panel[hidden] {
  display: none
}
.solution-panel.is-active {
  animation: 560ms cubic-bezier(.22,1,.36,1) solutionPanelIn
}
@keyframes solutionPanelIn {
  from {
    opacity: 0;
    transform: translateY(16px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
.solution-panel-copy {
  padding-bottom: clamp(8px,2vw,20px)
}
.solution-panel-copy h3 {
  margin: 0 0 14px
}
.solution-panel-copy p {
  margin: 0 0 22px
}
.solution-points {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px
}
.solution-points li {
  position: relative;
  padding-left: 26px;
  font-size: 15px
}
.solution-points li::before {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 50%;
  background: var(--oc-blue-400);
  box-shadow: 0 0 0 4px rgba(88,199,243,.16)
}
.solution-panel-visual {
  align-self: end
}
.solution-mock {
  width: 100%;
  border: 1px solid rgba(234,242,248,.12);
  box-shadow: 0 18px 50px rgba(4,16,29,.5)
}
.solution-mock-acquire {
  display: flex;
  flex-direction: column;
  gap: 16px
}
.mock-acquire-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px
}
.mock-acquire-title {
  font-size: 16px;
  font-weight: 800
}
.mock-acquire-count {
  font-size: 13px
}
.mock-acquire-count b {
  color: var(--oc-gold-400);
  font-size: 15px
}
.mock-acquire-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px
}
.mock-lead {
  padding: 8px 6px;
  text-align: center;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--oc-text-light);
  border: 1px solid rgba(143,230,255,.2)
}
.mock-acquire-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding-top: 6px
}
.mock-acquire-bars span {
  flex: 1;
  height: var(--h,50%);
  background: linear-gradient(180deg,var(--oc-blue-400),rgba(47,142,219,.25))
}
.mock-acquire-bars span:nth-child(odd) {
  animation-delay: .4s
}
@keyframes acquireBar {
  0%,
  100% {
    transform: scaleY(1);
    transform-origin: bottom
  }
  50% {
    transform: scaleY(.86);
    transform-origin: bottom
  }
}
.site-header {
  border-bottom: 1px solid rgba(0,0,0,.05)
}
.hero-pills-strip {
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  box-shadow: none
}
.hero-copy {
  box-shadow: 0 22px 54px rgba(40,38,33,.08)
}
.hero {
  min-height: calc(74svh - var(--pills-tall,96px))
}
@supports not (height:100svh) {
  .hero {
    min-height: calc(74vh - var(--pills-tall,96px))
  }
}
#solutions .section-kicker {
  color: var(--ink);
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.56)
}
#solutions #solutions-title,
#solutions .section-heading h2 {
  color: var(--oc-ocean-900)
}
#solutions .section-heading p {
  color: var(--ink-soft)
}
@media (max-width:820px) {
  .solution-stage {
    width: 88%
  }
  .solution-panel {
    grid-template-columns: 1fr;
    align-items: stretch
  }
  .solution-panel-copy {
    padding-bottom: 24px
  }
  .solution-mock {
    height: 300px
  }
  .hero {
    min-height: auto
  }
}
.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-decoration: none;
  color: var(--oc-ocean-900);
  border: 1px solid var(--line-strong);
  transition: transform 180ms,background 180ms,border-color 180ms
}
.learn-more::after {
  content: "\2192";
  font-size: 15px;
  transition: transform .2s
}
.learn-more:hover::after {
  transform: translateX(3px)
}
#solutions .learn-more {
  color: var(--oc-ocean-900)
}
.footer-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px
}
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}
@media (max-width:720px) {
  .footer-layout {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px
  }
}
.hero-pills-strip,
.site-header {
  box-shadow: 0 1px 0 rgba(255,255,255,.62) inset;
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px)
}
.hero-pill:focus-visible,
.hero-pill:hover {
  color: rgba(17,24,39,.92)
}
.hero h1,
.hero-copy {
  border: 1px solid rgba(255,255,255,.62);
  box-shadow: 0 1px 0 rgba(255,255,255,.76) inset,0 24px 72px rgba(31,35,40,.12);
  backdrop-filter: saturate(180%) blur(26px);
  -webkit-backdrop-filter: saturate(180%) blur(26px)
}
.solution-tabs {
  box-shadow: 0 16px 44px rgba(4,16,29,.34)
}
.solution-tab::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  opacity: 0;
  transform: translateX(-80%);
  transition: opacity 220ms,transform 420ms cubic-bezier(.22, 1, .36, 1)
}
.solution-tab.is-active::before {
  opacity: 1;
  transform: translateX(0)
}
.enterprise-graph-frame {
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset,0 34px 100px rgba(4,16,29,.38);
  box-shadow: 0 1px 0 rgba(255,255,255,.82) inset,0 22px 64px rgba(17,24,39,.08)
}
.enterprise-graph-frame::after,
.enterprise-graph-frame::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  display: none
}
.enterprise-graph-frame::before {
  background: linear-gradient(120deg,rgba(255,255,255,.12),transparent 34%),repeating-linear-gradient(90deg,rgba(234,242,248,.035) 0 1px,transparent 1px 42px);
  mix-blend-mode: screen
}
.enterprise-graph-frame::after {
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -90px 120px rgba(0,0,0,.22)
}
.footer-layout {
  display: grid;
  grid-template-columns: auto minmax(220px,1fr) auto;
  align-items: center
}
.site-footer .brand-icon.small {
  width: 34px;
  height: 34px
}
.footer-bottom {
  justify-self: end;
  display: grid;
  justify-items: end;
  gap: 3px;
  margin: 0;
  padding: 0;
  border-top: 0
}
@media (max-width:820px) {
  .footer-layout {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 16px
  }
  .footer-bottom {
    justify-self: start;
    justify-items: start
  }
}
:root {
  --oc-ocean-950: #04101d;
  --oc-ocean-900: #071827;
  --oc-ocean-800: #0b2238;
  --oc-ocean-700: #123a5a;
  --oc-mist: #f4f6f7;
  --oc-ivory: #f1eee7;
  --oc-fog: #e8ecef;
  --oc-blue-500: #2f8edb;
  --oc-blue-400: #58c7f3;
  --oc-cyan-300: #8fe6ff;
  --oc-gold-400: #ff6a00;
  --oc-gold-500: #e35f00;
  --oc-text-dark: #111827;
  --oc-text-muted: #5b6673;
  --oc-text-light: #eaf2f8;
  --blue-link: #2f8edb;
  color-scheme: light;
  --oct-menu-size: 56px;
  --oct-section-y: clamp(86px, 9vw, 128px);
  --oct-section-min: min(760px, calc(100svh - var(--oct-menu-size)));
  --oct-inner: 1160px;
  --oct-paper: #edece7;
  --oct-paper-soft: #f4f3ef;
  --oct-paper-warm: #e7e5df;
  --oct-ink: #111827;
  --oct-ink-soft: rgba(17, 24, 39, 0.64);
  --oct-ink-muted: rgba(17, 24, 39, 0.46);
  --oct-line: rgba(17, 24, 39, 0.1);
  --oct-line-soft: rgba(17, 24, 39, 0.07);
  --oct-glass: rgba(250, 250, 251, 0.86);
  --oct-radius: 18px;
  --oct-radius-sm: 10px;
  --oct-shadow-flat: 0 18px 54px rgba(17, 24, 39, 0.07)
}
body::before {
  display: none
}
.hero-pills-strip,
.site-header {
  height: var(--oct-menu-size);
  min-height: var(--oct-menu-size);
  padding: 0 34px;
  color: var(--oct-ink);
  background: var(--oct-glass);
  box-shadow: 0 1px 0 rgba(255,255,255,.68) inset;
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px)
}
.hero-pills-strip.is-stuck,
.site-header.is-scrolled {
  height: var(--oct-menu-size);
  min-height: var(--oct-menu-size)
}
.brand-name,
.site-header .brand-name {
  color: var(--oct-ink)
}
.hero-pills,
.nav-actions,
.nav-group,
.site-nav {
  height: var(--oct-menu-size);
  min-height: var(--oct-menu-size);
  align-items: center
}
.site-nav {
  gap: clamp(18px,2.6vw,34px)
}
.nav-group {
  gap: 6px
}
.contact-link,
.lang-toggle,
.nav-link {
  cursor: pointer;
  color: rgba(17,24,39,.74)
}
.nav-link {
  padding: 0 13px
}
.contact-link:hover,
.lang-toggle:hover,
.nav-link:focus-visible,
.nav-link:hover {
  color: var(--oct-ink)
}
.contact-link,
.lang-toggle {
  border-color: rgba(17,24,39,.11);
  background: rgba(255,255,255,.38);
  border-radius: 999px
}
.mega-panel {
  border-color: rgba(17,24,39,.11);
  box-shadow: 0 22px 60px rgba(17,24,39,.12)
}
.mega-intro h2,
.mega-label,
.mega-list strong {
  color: var(--oct-ink)
}
.mega-intro p:last-child,
.mega-list span {
  color: var(--oct-ink-soft)
}
.hero {
  min-height: calc(100svh - (var(--oct-menu-size) * 2))
}
@supports not (height:100svh) {
  :root {
    --oct-section-min: min(760px, calc(100vh - var(--oct-menu-size)))
  }
  .hero {
    min-height: calc(100vh - (var(--oct-menu-size) * 2))
  }
}
.hero h1,
.hero-copy {
  box-shadow: 0 1px 0 rgba(255,255,255,.68) inset,0 18px 54px rgba(17,24,39,.1);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px)
}
.hero-pills-strip {
  position: sticky;
  top: var(--oct-menu-size);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 0;
  border-bottom: 1px solid rgba(0,0,0,.065);
  top: var(--oct-menu-size)
}
.hero-pills {
  width: min(var(--oct-inner),calc(100% - 68px));
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none
}
.hero-pills::-webkit-scrollbar {
  display: none
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  color: rgba(17,24,39,.72);
  border: 1px solid transparent;
  background: 0 0;
  font-weight: 650;
  white-space: nowrap
}
.hero-pill:focus-visible,
.hero-pill:hover {
  color: var(--oct-ink);
  border-color: rgba(17,24,39,.1);
  background: rgba(255,255,255,.42)
}
.hero-pill.is-coming {
  cursor: default;
  color: rgba(17,24,39,.38);
  border-color: transparent;
  background: 0 0
}
#assets,
#enterprise,
#platform,
#solutions,
.section,
.section-panel,
.solutions-section {
  min-height: var(--oct-section-min);
  padding: var(--oct-section-y) 36px;
  color: var(--oct-ink);
  background: linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0)),var(--oct-paper);
  overflow: hidden
}
#assets,
#platform {
  background: linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.02)),var(--oct-paper-soft)
}
#enterprise {
  background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0)),var(--oct-paper-warm)
}
.section-inner {
  width: min(var(--oct-inner),calc(100% - 72px));
  margin: 0 auto
}
.assets-layout,
.enterprise-layout,
.two-column {
  display: grid;
  grid-template-columns: minmax(0,0.92fr) minmax(0,1.08fr);
  align-items: center;
  gap: clamp(42px,7vw,96px);
  min-height: calc(var(--oct-section-min) - (var(--oct-section-y) * 2))
}
.section-kicker {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 0 14px;
  border: 1px solid var(--oct-line);
  color: var(--oct-ink);
  font-weight: 750;
  letter-spacing: 0;
  box-shadow: none
}
#assets-title,
#creators-title,
#enterprise-title,
#solutions-title,
.enterprise-copy h2,
.section-heading h2,
.section-heading.compact h2 {
  margin: 0;
  color: var(--oct-ink)
}
#assets p,
#platform p,
.enterprise-copy p,
.section-heading p,
.solution-panel-copy p {
  color: var(--oct-ink-soft)
}
.learn-more {
  color: var(--oct-ink);
  border-color: var(--oct-line)
}
.learn-more:focus-visible,
.learn-more:hover {
  transform: translateY(-1px)
}
#solutions {
  padding-bottom: var(--oct-section-y)
}
.solution-reveal {
  left: 50%;
  width: 100vw;
  margin: clamp(40px,6vw,72px) -50vw 0;
  padding-bottom: 0
}
.solution-reveal.is-open .solution-stage,
.solution-stage {
  width: min(var(--oct-inner),calc(100vw - 72px));
  color: var(--oct-ink);
  border: 1px solid var(--oct-line);
  border-radius: var(--oct-radius);
  box-shadow: var(--oct-shadow-flat);
  opacity: 1;
  transform: none
}
.solution-tabs {
  border: 1px solid var(--oct-line);
  box-shadow: none
}
.solution-tab {
  font-size: 0;
  padding: 0;
  border: 0;
  box-shadow: none
}
.solution-tab::before {
  background: rgba(17,24,39,.72)
}
.solution-tab.is-active {
  color: transparent
}
.solution-panel {
  align-items: center
}
.solution-panel-copy h3 {
  color: var(--oct-ink);
  letter-spacing: 0
}
.solution-points li::before {
  top: 7px;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(17,24,39,.42);
  background: 0 0;
  box-shadow: none
}
.asset-module-card,
.enterprise-graph-frame,
.idea-flow-visual,
.solution-mock {
  border: 1px solid var(--oct-line);
  border-radius: var(--oct-radius);
  box-shadow: var(--oct-shadow-flat)
}
.solution-mock {
  padding: 22px;
  position: relative;
  overflow: hidden
}
.mock-acquire-count {
  color: var(--oct-ink-muted)
}
.mock-acquire-count b,
.mock-acquire-title {
  color: var(--oct-ink)
}
.mock-lead {
  border-color: var(--oct-line-soft)
}
.mock-acquire-bars span {
  border-radius: 6px 6px 0 0;
  background: rgba(17,24,39,.18)
}
.asset-module-grid {
  grid-template-rows: repeat(2,minmax(0,1fr));
  align-items: stretch
}
.asset-module-grid .asset-module-card,
.asset-module-grid .asset-module-card:nth-child(2),
.asset-module-grid .asset-module-card:nth-child(3),
.asset-module-grid .asset-module-card:nth-child(4),
.asset-module-grid .asset-module-card:nth-child(5),
.asset-module-grid .asset-module-card:nth-child(6) {
  display: flex;
  flex-direction: column;
  background-image: none
}
.asset-module-grid .asset-module-card:focus-within,
.asset-module-grid .asset-module-card:hover {
  background-image: none
}
.asset-module-card span {
  color: var(--oct-ink-muted);
  font-size: 13px;
  letter-spacing: 0;
  margin-bottom: 16px
}
.asset-module-card h3 {
  color: var(--oct-ink);
  margin-bottom: 10px
}
.asset-module-card p {
  color: var(--oct-ink-soft)
}
.site-footer {
  color: var(--oct-ink);
  border-top: 1px solid var(--oct-line);
  box-shadow: 0 1px 0 rgba(255,255,255,.62) inset
}
.footer-layout {
  width: min(var(--oct-inner),calc(100% - 72px));
  display: grid;
  grid-template-columns: auto minmax(220px,1fr) auto;
  align-items: center;
  gap: 24px;
  margin: 0 auto
}
@media (max-width:980px) {
  .footer-layout,
  .hero-pills,
  .section-inner {
    width: min(var(--oct-inner),calc(100% - 40px))
  }
  .assets-layout,
  .enterprise-layout,
  .solution-panel,
  .two-column {
    grid-template-columns: 1fr;
    min-height: auto
  }
  .solution-reveal.is-open .solution-stage,
  .solution-stage {
    width: calc(100vw - 40px)
  }
}
@media (max-width:820px) {
  :root {
    --oct-menu-size: 56px;
    --oct-section-y: 72px
  }
  .site-header {
    padding: 0 20px
  }
  .site-nav {
    height: auto
  }
  .hero {
    min-height: auto;
    padding: 98px 20px 52px
  }
  .hero-pills-strip {
    padding: 0 20px
  }
  .hero-pills {
    justify-content: flex-start
  }
  #assets,
  #enterprise,
  #platform,
  #solutions,
  .section,
  .section-panel,
  .solutions-section {
    min-height: auto;
    padding: var(--oct-section-y) 20px
  }
  #assets-title,
  #creators-title,
  #enterprise-title,
  #solutions-title,
  .enterprise-copy h2,
  .section-heading h2,
  .section-heading.compact h2 {
    font-size: clamp(34px, 10vw, 48px)
  }
  .footer-layout {
    grid-template-columns: 1fr;
    justify-items: start;
    width: min(var(--oct-inner),calc(100% - 40px))
  }
}
.hero h1,
.hero-copy {
  background: rgba(248,248,246,.2);
  border-color: rgba(255,255,255,.42);
  box-shadow: 0 1px 0 rgba(255,255,255,.48) inset,0 16px 48px rgba(17,24,39,.08)
}
.hero-copy a {
  color: var(--oct-orange);
  font-weight: 760;
  text-decoration: none
}
.contact-link:focus-visible,
.contact-link:hover {
  color: #fff;
  border-color: #111827;
  background: #111827
}
#solutions {
  display: grid;
  align-content: center;
  min-height: calc(var(--oct-section-min) + 120px);
  padding-bottom: clamp(72px,8vw,116px);
  background: radial-gradient(70% 58% at 50% 100%,rgba(242,106,33,.08),transparent 68%),var(--oct-paper)
}
.solution-title-wrap {
  display: grid;
  place-items: center;
  min-height: auto;
  margin-bottom: clamp(34px,5vw,64px);
  text-align: center
}
.solution-title-wrap #solutions-title {
  max-width: 920px;
  color: var(--oct-ink);
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1;
  letter-spacing: 0
}
.solution-reveal {
  margin-top: 0
}
.solution-stage {
  background: radial-gradient(82% 110% at 88% 12%,rgba(242,106,33,.15),transparent 58%),linear-gradient(180deg,var(--oct-dark-card-2),var(--oct-dark-card));
  transition: width .9s cubic-bezier(.22, 1, .36, 1),min-height .9s cubic-bezier(.22, 1, .36, 1),opacity 620ms,transform 760ms cubic-bezier(.22, 1, .36, 1),border-radius 620ms
}
.solution-tab {
  color: transparent
}
.solution-tab.is-active,
.solution-tab::before {
  background: var(--oct-orange)
}
.solution-mock::before {
  position: absolute;
  inset: -32%;
  content: "";
  background: radial-gradient(circle at 70% 28%,rgba(242,106,33,.24),transparent 28%),linear-gradient(120deg,transparent 34%,rgba(255,255,255,.08) 46%,transparent 58%);
  opacity: .65;
  transform: translateX(-8%);
  animation: 9s ease-in-out infinite solutionMockDrift
}
.solution-mock > * {
  position: relative;
  z-index: 1
}
@keyframes solutionMockDrift {
  0%,
  100% {
    transform: translate(-8%,0) rotate(0)
  }
  50% {
    transform: translate(8%,-3%) rotate(5deg)
  }
}
.mock-acquire-count {
  color: rgba(248,248,246,.52)
}
.mock-acquire-count b,
.mock-acquire-title {
  color: #fbfaf7
}
.mock-lead {
  color: rgba(248,248,246,.78);
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.065)
}
.mock-lead:hover {
  border-color: rgba(242,106,33,.5);
  color: #ffd9c7
}
.mock-acquire-bars span {
  background: linear-gradient(180deg,var(--oct-orange),rgba(242,106,33,.24));
  animation: 3.4s ease-in-out infinite acquireBar
}
#assets,
#enterprise,
#platform {
  background: linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,0)),var(--oct-paper)
}
#enterprise {
  background: radial-gradient(70% 52% at 92% 48%,rgba(242,106,33,.055),transparent 58%),var(--oct-paper-warm)
}
.assets-layout,
.enterprise-layout,
.two-column {
  grid-template-columns: minmax(0,0.95fr) minmax(0,1.05fr)
}
#assets .section-heading,
#platform .section-heading,
#platform .section-inner > div:first-child,
.enterprise-copy {
  max-width: 560px
}
#assets h2,
#assets-title,
#creators-title,
#enterprise h2,
#enterprise-title,
#platform .section-heading h2,
#platform h2 {
  font-size: clamp(32px, 3.7vw, 48px);
  line-height: 1.08
}
#assets p,
#enterprise p,
#platform p,
.enterprise-copy p,
.section-heading p {
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.78
}
.section-kicker::before {
  background: var(--oct-orange);
  content: ""
}
.idea-flow-visual {
  min-height: 410px;
  padding: 0
}
.enterprise-graph-frame,
.obsidian-graph {
  min-height: 470px
}
.asset-module-grid .asset-module-card,
.asset-module-grid .asset-module-card:nth-child(2),
.asset-module-grid .asset-module-card:nth-child(3),
.asset-module-grid .asset-module-card:nth-child(4),
.asset-module-grid .asset-module-card:nth-child(5),
.asset-module-grid .asset-module-card:nth-child(6) {
  border-color: rgba(17,24,39,.09);
  background: rgba(255,255,255,.42);
  transition: transform 180ms,border-color 180ms,background 180ms,box-shadow 180ms
}
.asset-module-grid .asset-module-card:focus-within,
.asset-module-grid .asset-module-card:hover {
  transform: translateY(-3px);
  border-color: rgba(242,106,33,.58);
  background: rgba(242,106,33,.1);
  box-shadow: 0 18px 54px rgba(242,106,33,.1)
}
.asset-module-grid .asset-module-card:focus-within span,
.asset-module-grid .asset-module-card:hover span {
  color: #b94d16
}
.asset-module-grid .asset-module-card:focus-within h3,
.asset-module-grid .asset-module-card:hover h3 {
  color: #7a2e0d
}
.site-footer {
  padding: 30px 34px;
  border-top: 1px solid rgba(17,24,39,.08);
  background: #e7e5df;
  box-shadow: none
}
.site-footer .footer-layout {
  display: grid;
  grid-template-columns: auto minmax(160px,1fr) auto;
  align-items: center;
  gap: 28px
}
.footer-text-button {
  border: 0;
  background: 0 0;
  font: inherit;
  cursor: pointer;
  padding: 4px 0;
  color: rgba(17,24,39,.58);
  border-bottom: 1px solid transparent;
  font-size: 14px;
  font-weight: 680
}
.footer-text-button:focus-visible,
.footer-text-button:hover {
  color: var(--oct-orange);
  border-color: rgba(242,106,33,.42)
}
@media (max-width:980px) {
  .solution-reveal.is-open .solution-stage,
  .solution-stage {
    width: calc(100vw - 40px)
  }
  .solution-panel,
  .solution-reveal.is-open .solution-stage {
    min-height: auto
  }
  .site-footer .footer-layout {
    grid-template-columns: 1fr;
    justify-items: start
  }
}
@media (max-width:820px) {
  .solution-title-wrap #solutions-title {
    font-size: clamp(36px, 10vw, 52px)
  }
  .solution-tabs {
    max-width: calc(100% - 28px);
    overflow-x: auto;
    scrollbar-width: none
  }
  .solution-tabs::-webkit-scrollbar {
    display: none
  }
  .enterprise-graph-frame,
  .idea-flow-visual,
  .obsidian-graph {
    min-height: 320px
  }
}
.solution-reveal.is-open .solution-stage,
.solution-stage {
  background: radial-gradient(82% 110% at 88% 12%,rgba(242,106,33,.15),transparent 58%),linear-gradient(180deg,var(--oct-dark-card-2),var(--oct-dark-card));
  box-shadow: 0 30px 80px rgba(17,24,39,.24)
}
.solution-stage {
  width: min(720px,calc(100vw - 72px));
  opacity: .74;
  transform: translateY(28px) scale(.92)
}
.solution-reveal.is-open .solution-stage {
  width: min(1180px,calc(100vw - 72px));
  opacity: 1;
  transform: none
}
.solution-reveal.is-open .solution-stage .mock-acquire-count b,
.solution-reveal.is-open .solution-stage .mock-acquire-title,
.solution-reveal.is-open .solution-stage .solution-panel-copy h3,
.solution-stage .mock-acquire-count b,
.solution-stage .mock-acquire-title,
.solution-stage .solution-panel-copy h3 {
  color: #fbfaf7
}
.solution-reveal.is-open .solution-stage .solution-panel-copy p,
.solution-stage .solution-panel-copy p {
  color: rgba(248,248,246,.72)
}
.solution-reveal.is-open .solution-stage .solution-points li,
.solution-stage .solution-points li {
  color: rgba(248,248,246,.82)
}
.asset-module-grid {
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-template-rows: repeat(3,minmax(154px,1fr));
  grid-template-columns: repeat(2,minmax(0,1fr));
  grid-template-rows: repeat(3,270px);
  min-height: auto;
  align-items: stretch
}
.asset-module-grid .asset-module-card,
.asset-module-grid .asset-module-card:nth-child(2),
.asset-module-grid .asset-module-card:nth-child(3),
.asset-module-grid .asset-module-card:nth-child(4),
.asset-module-grid .asset-module-card:nth-child(5),
.asset-module-grid .asset-module-card:nth-child(6) {
  height: auto;
  min-height: 0;
  padding: 20px;
  overflow: hidden
}
.solution-tabs {
  gap: 9px;
  width: max-content;
  max-width: calc(100% - 40px);
  gap: 11px
}
.solution-tabs .solution-tab::before {
  display: none
}
.solution-tabs .solution-tab.is-active {
  border-color: var(--oct-orange);
  background: var(--oct-orange)
}
.solution-panel-link {
  display: inline-flex;
  align-items: center
}
.solution-panel-link:focus-visible,
.solution-panel-link:hover {
  color: var(--oct-orange)
}
@keyframes customCardPulse {
  0%,
  100% {
    border-color: rgba(255,255,255,.1);
    transform: translateY(0)
  }
  50% {
    border-color: rgba(242,106,33,.5);
    transform: translateY(-3px)
  }
}
.learn-more,
.learn-more::after {
  color: var(--oct-orange)
}
#assets .assets-layout {
  grid-template-columns: minmax(300px,0.78fr) minmax(0,1.32fr)
}
#assets .asset-module-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-rows: repeat(2,250px);
  min-height: auto
}
#assets .asset-module-card,
#assets .asset-module-card:nth-child(2),
#assets .asset-module-card:nth-child(3),
#assets .asset-module-card:nth-child(4),
#assets .asset-module-card:nth-child(5),
#assets .asset-module-card:nth-child(6) {
  padding: 18px
}
.site-footer {
  padding: clamp(42px,6vw,72px) 34px
}
.site-footer .footer-layout {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 22px
}
@media (max-width:980px) {
  #assets .assets-layout {
    grid-template-columns: 1fr
  }
  #assets .asset-module-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-rows: repeat(3,240px)
  }
}
@media (max-width:680px) {
  .solution-tabs {
    justify-content: flex-start;
    width: calc(100% - 28px)
  }
  #assets .asset-module-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none
  }
  #assets .asset-module-card {
    min-height: 210px
  }
  .site-footer .footer-layout {
    grid-template-columns: 1fr
  }
}
.hero-pills-strip,
.site-header {
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  box-shadow: 0 1px 0 rgba(255,255,255,.24),0 18px 54px rgba(20,24,30,.06)
}
.hero-pills-strip.is-stuck,
.site-header.is-scrolled {
  border-color: rgba(255,255,255,.56)
}
.hero h1 {
  -webkit-backdrop-filter: saturate(190%) blur(30px);
  backdrop-filter: saturate(190%) blur(30px);
  box-shadow: 0 18px 70px rgba(20,24,30,.08),inset 0 1px 0 rgba(255,255,255,.72)
}
.hero-copy {
  border: 1px solid rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(190%) blur(28px);
  backdrop-filter: saturate(190%) blur(28px);
  box-shadow: 0 16px 56px rgba(20,24,30,.07),inset 0 1px 0 rgba(255,255,255,.7)
}
.solution-tabs .solution-tab {
  font-weight: 760;
  padding: 0;
  border: 0;
  color: transparent;
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  white-space: nowrap
}
.solution-tabs .solution-tab:focus-visible,
.solution-tabs .solution-tab:hover {
  color: transparent;
  border: 0;
  background: rgba(255,255,255,.38)
}
.solution-tabs .solution-tab.is-active {
  color: transparent;
  background: var(--oct-orange);
  box-shadow: 0 0 0 1px rgba(242,106,33,.16)
}
@keyframes abstractSpin {
  to {
    transform: rotate(1turn)
  }
}
@keyframes abstractBreath {
  0%,
  100% {
    transform: scale(.98) rotate(-2deg);
    opacity: .78
  }
  50% {
    transform: scale(1.05) rotate(2deg);
    opacity: 1
  }
}
@keyframes abstractCore {
  0%,
  100% {
    transform: translate(-50%,-50%) scale(.96)
  }
  50% {
    transform: translate(-50%,-50%) scale(1.08)
  }
}
@keyframes abstractNode {
  0%,
  100% {
    transform: translate3d(0,0,0)
  }
  50% {
    transform: translate3d(8px,-10px,0)
  }
}
@keyframes abstractPulse {
  0%,
  100% {
    opacity: .36
  }
  50% {
    opacity: .94
  }
}
#assets .section-heading.compact {
  align-self: start;
  padding-top: clamp(10px,2vw,28px)
}
#assets-title {
  margin-top: 0
}
#assets .asset-module-card span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  border: 1px solid rgba(242,106,33,.34);
  font-weight: 820;
  letter-spacing: 0
}
#assets .asset-module-card:focus-within span,
#assets .asset-module-card:hover span {
  color: #111827;
  border-color: var(--oct-orange);
  background: var(--oct-orange)
}
.site-footer.cursor-footer {
  min-height: auto;
  border-top: 1px solid rgba(17,24,39,.08)
}
.site-footer.cursor-footer .footer-layout {
  display: grid;
  grid-template-columns: minmax(260px,0.72fr) minmax(520px,1.28fr);
  gap: clamp(44px,7vw,92px);
  align-items: start;
  max-width: 1280px
}
.footer-brand-block {
  display: grid;
  justify-items: start;
  gap: 20px
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #111827;
  font-size: 17px;
  font-weight: 820
}
.footer-logo img {
  width: 26px;
  height: 26px;
  object-fit: contain
}
.footer-brand-block p {
  margin: 0;
  max-width: 330px;
  color: rgba(17,24,39,.58);
  line-height: 1.7
}
.footer-columns {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: clamp(22px,3vw,42px)
}
.footer-columns h3 {
  margin: 0 0 14px;
  color: rgba(17,24,39,.92);
  font-size: 13px;
  font-weight: 820;
  line-height: 1.2
}
.footer-columns a,
.site-footer.cursor-footer .footer-text-button {
  min-height: 0;
  display: block;
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgba(17,24,39,.52);
  background: 0 0;
  font: inherit;
  font-size: 13px;
  font-weight: 540;
  line-height: 1.45;
  text-align: left;
  cursor: pointer
}
.footer-columns a:focus-visible,
.footer-columns a:hover,
.site-footer.cursor-footer .footer-text-button:focus-visible,
.site-footer.cursor-footer .footer-text-button:hover {
  color: var(--oct-orange);
  background: 0 0
}
.site-footer.cursor-footer .footer-bottom {
  grid-column: 1/-1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid rgba(17,24,39,.08);
  color: rgba(17,24,39,.42);
  font-size: 12px
}
@media (max-width:980px) {
  .hero h1 {
    font-size: clamp(54px, 13vw, 92px)
  }
  .site-footer.cursor-footer .footer-layout {
    grid-template-columns: 1fr
  }
  .footer-columns {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
}
@media (max-width:680px) {
  .hero h1 {
    padding: 12px 14px;
    font-size: clamp(46px, 16vw, 68px)
  }
  .hero-copy {
    background: rgba(255,255,255,.48)
  }
  .solution-tabs {
    justify-content: center;
    width: max-content;
    max-width: calc(100% - 28px)
  }
  .solution-tabs .solution-tab {
    width: 34px;
    min-width: 34px
  }
  .solution-tabs .solution-tab.is-active {
    width: 58px;
    min-width: 58px
  }
  .footer-columns {
    grid-template-columns: 1fr
  }
  .site-footer.cursor-footer .footer-bottom {
    align-items: flex-start;
    flex-direction: column
  }
}
.site-nav .contact-link {
  appearance: none;
  border: 1px solid rgba(17,24,39,.14);
  color: #111827;
  background: rgba(255,255,255,.34);
  font: inherit;
  cursor: pointer
}
.site-nav .contact-link:focus-visible,
.site-nav .contact-link:hover {
  color: #fff;
  border-color: #111827;
  background: #111827
}
.hero h1 {
  padding: 0;
  border: 0;
  background: 0 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none
}
.hero-copy {
  -webkit-backdrop-filter: saturate(180%) blur(26px);
  backdrop-filter: saturate(180%) blur(26px);
  box-shadow: 0 14px 46px rgba(20,24,30,.055),inset 0 1px 0 rgba(255,255,255,.46)
}
.hero-copy a {
  color: var(--oct-orange);
  border-bottom: 0;
  text-decoration-line: underline;
  text-decoration-color: rgba(242,106,33,0.72);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em
}
.hero-copy a:focus-visible,
.hero-copy a:hover {
  color: #c94f12;
  text-decoration-color: currentColor
}
@keyframes chatThreadLift {
  0%,
  100% {
    transform: translateY(10px)
  }
  48%,
  62% {
    transform: translateY(-14px)
  }
}
@keyframes chatMessageFloat {
  0%,
  100% {
    opacity: .82;
    transform: translateY(6px)
  }
  42%,
  68% {
    opacity: 1;
    transform: translateY(-4px)
  }
}
.solution-panel-link {
  appearance: none;
  display: inline-flex;
  width: max-content;
  align-items: center;
  margin-top: 22px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid rgba(242,106,33,.7);
  border-radius: 0;
  color: var(--oct-orange);
  background: 0 0;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.6;
  cursor: pointer
}
.solution-panel-link:focus-visible,
.solution-panel-link:hover {
  background: 0 0;
  border-bottom-color: currentColor
}
@keyframes mailRouteDraw {
  0% {
    stroke-dashoffset: 1;
    opacity: .18
  }
  38%,
  72% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: .18
  }
}
@keyframes mailFly {
  0% {
    opacity: 0;
    transform: translate(-188px,58px) rotate(-9deg) scale(.92)
  }
  14% {
    opacity: 1
  }
  54% {
    transform: translate(4px,-18px) rotate(5deg) scale(1)
  }
  86% {
    opacity: 1;
    transform: translate(178px,-70px) rotate(11deg) scale(.96)
  }
  100% {
    opacity: 0;
    transform: translate(214px,-84px) rotate(13deg) scale(.9)
  }
}
@keyframes mailShadow {
  0% {
    opacity: 0;
    transform: translateX(-160px) scale(.7)
  }
  18%,
  72% {
    opacity: .42
  }
  100% {
    opacity: 0;
    transform: translateX(120px) scale(.42)
  }
}
@keyframes mailNodePulse {
  0%,
  100% {
    transform: scale(.9);
    opacity: .48
  }
  50% {
    transform: scale(1.18);
    opacity: 1
  }
}
@media (max-width:980px) {
  .hero h1 {
    font-size: clamp(48px, 11vw, 82px)
  }
}
@media (max-width:680px) {
  .hero h1 {
    font-size: clamp(40px, 13vw, 58px)
  }
  .hero-copy {
    background: rgba(255,255,255,.3)
  }
}
:root {
  --oct-orange: #f26a21;
  --oct-orange-soft: rgba(242, 106, 33, 0.14);
  --oct-dark-card: #111318;
  --oct-dark-card-2: #1a1c20;
  --oct-menu-size: 60px;
  --oct-inner: 1200px;
  --oct-section-y: clamp(88px, 8.2vw, 116px);
  --oct-section-min: clamp(700px, calc(100svh - (var(--oct-menu-size) * 2)), 780px);
  --oct-paper: #efefec;
  --oct-paper-soft: #f7f6f3;
  --oct-paper-warm: #ebe9e3;
  --oct-ink: #101821;
  --oct-ink-soft: rgba(16, 24, 33, 0.66);
  --oct-ink-muted: rgba(16, 24, 33, 0.46);
  --oct-line: rgba(16, 24, 33, 0.11);
  --oct-line-soft: rgba(16, 24, 33, 0.07);
  --oct-orange: #ef6b2e;
  --oct-orange-dark: #c95018;
  --oct-radius: 8px;
  --oct-radius-sm: 6px;
  --oct-shadow-flat: 0 18px 50px rgba(16, 24, 33, 0.07)
}
.hero-pills-strip,
.site-header {
  height: var(--oct-menu-size);
  min-height: var(--oct-menu-size);
  padding-inline: clamp(24px,3.2vw,48px);
  background: rgba(247,247,245,.7);
  border-color: rgba(16,24,33,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.58) inset;
  -webkit-backdrop-filter: saturate(155%) blur(24px);
  backdrop-filter: saturate(155%) blur(24px)
}
.hero-pills-strip.is-stuck,
.site-header.is-scrolled {
  background: rgba(247,247,245,.82)
}
.brand-icon {
  width: 36px;
  height: 36px
}
.brand-name,
.site-header .brand-name {
  font-size: 15px;
  font-weight: 760
}
.site-nav {
  gap: clamp(14px,2vw,30px)
}
.nav-group {
  gap: 2px
}
.contact-link,
.lang-toggle,
.nav-link {
  min-height: 34px;
  font-size: 14.5px;
  font-weight: 650
}
.nav-link {
  padding-inline: 12px
}
.lang-toggle,
.site-nav .contact-link {
  padding-inline: 13px;
  border-radius: 999px
}
.mega-panel {
  border-radius: 8px;
  background: rgba(251,251,249,.98);
  box-shadow: 0 24px 64px rgba(16,24,33,.14)
}
.hero {
  min-height: calc(100svh - var(--oct-menu-size));
  padding: clamp(106px,14vh,148px) 36px clamp(62px,8vh,88px)
}
.hero::before {
  background: linear-gradient(180deg,rgba(236,236,232,.22),rgba(236,236,232,.03) 48%,rgba(224,224,219,.26))
}
.hero-video {
  opacity: .5;
  filter: grayscale(1) contrast(1.04) brightness(1.04)
}
.hero-content {
  width: min(930px,calc(100% - 32px));
  gap: 28px
}
.hero h1 {
  max-width: 930px;
  color: #0b1827;
  font-size: 82px;
  font-weight: 690;
  line-height: .99;
  letter-spacing: 0;
  text-wrap: balance
}
.hero-copy {
  max-width: 850px;
  padding: 18px 24px;
  color: rgba(9,20,31,.86);
  border-color: rgba(255,255,255,.54);
  border-radius: 8px;
  background: rgba(255,255,255,.19);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.7;
  box-shadow: 0 12px 42px rgba(16,24,33,.05),inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: saturate(145%) blur(20px);
  backdrop-filter: saturate(145%) blur(20px)
}
.hero-copy a {
  color: var(--oct-orange-dark);
  text-decoration-color: rgba(201,80,24,0.62);
  text-decoration-thickness: 1px
}
.hero-pills {
  width: min(var(--oct-inner),calc(100% - 48px));
  gap: 4px
}
.hero-pill {
  position: relative;
  min-height: 34px;
  padding-inline: 13px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 650;
  transition: color 180ms,background-color 180ms
}
.hero-pill::after {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 2px;
  content: "";
  background: var(--oct-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms
}
.hero-pill.is-active,
.hero-pill:focus-visible,
.hero-pill:hover {
  color: var(--oct-ink);
  border-color: transparent;
  background: rgba(16,24,33,.045)
}
.hero-pill.is-active::after {
  transform: scaleX(1)
}
.hero-pill.is-coming::after {
  display: none
}
#assets,
#enterprise,
#platform,
#solutions,
.section,
.section-panel,
.solutions-section {
  min-height: var(--oct-section-min);
  padding: var(--oct-section-y) 36px
}
.section-inner {
  width: min(var(--oct-inner),calc(100% - 72px))
}
.assets-layout,
.enterprise-layout,
.two-column {
  grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr);
  gap: clamp(58px,7vw,94px);
  min-height: clamp(480px,56vh,560px)
}
.enterprise-copy,
.section-heading,
.section-heading.compact {
  max-width: 540px
}
.section-kicker {
  position: relative;
  min-height: 32px;
  margin-bottom: 20px;
  padding-inline: 13px;
  border-radius: 6px;
  background: rgba(255,255,255,.46);
  font-size: 14px;
  font-weight: 720
}
.section-kicker::before {
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  content: "";
  background: var(--oct-orange)
}
#assets-title,
#creators-title,
#enterprise-title,
#solutions-title,
.enterprise-copy h2,
.section-heading h2,
.section-heading.compact h2 {
  color: #0d1928;
  font-size: 54px;
  font-weight: 680;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance
}
#assets .section-heading > p:not(.section-kicker),
#platform .two-column > div:first-child > p:not(.section-kicker),
.enterprise-copy p,
.section-heading p {
  max-width: 540px;
  margin-top: 22px;
  color: var(--oct-ink-soft);
  font-size: 17px;
  line-height: 1.78
}
.learn-more {
  min-height: auto;
  margin-top: 24px;
  padding: 0 0 3px;
  color: var(--oct-orange-dark);
  border: 0;
  border-bottom: 1px solid rgba(201,80,24,.45);
  border-radius: 0;
  background: 0 0;
  font-size: 15px;
  font-weight: 720;
  box-shadow: none
}
.learn-more:focus-visible,
.learn-more:hover {
  color: #a94214;
  border-color: currentColor;
  background: 0 0;
  transform: translateX(2px)
}
#solutions {
  padding-top: clamp(82px,8vw,108px)
}
.solution-title-wrap {
  width: min(980px,calc(100% - 72px))
}
#solutions-title {
  font-size: 68px
}
.solution-reveal {
  margin-top: clamp(42px,5vw,62px)
}
.solution-reveal.is-open .solution-stage,
.solution-stage {
  width: min(var(--oct-inner),calc(100vw - 72px));
  min-height: 500px;
  padding-top: 28px;
  color: #f6f6f3;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #17191e;
  box-shadow: 0 28px 72px rgba(16,19,24,.18)
}
.solution-tabs {
  gap: 8px;
  padding: 6px;
  border-color: rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.06)
}
.solution-tab,
.solution-tabs .solution-tab {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 10px;
  min-height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.22)
}
.solution-tab:hover {
  background: rgba(255,255,255,.34)
}
.solution-tab.is-active,
.solution-tabs .solution-tab.is-active {
  width: 76px;
  min-width: 76px;
  background: rgba(239,107,46,.34)
}
.solution-tab.is-active::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background: var(--oct-orange);
  transform-origin: left;
  animation: 5s linear infinite solutionTabProgress
}
.solution-reveal:focus-within .solution-tab.is-active::after,
.solution-reveal:hover .solution-tab.is-active::after {
  animation-play-state: paused
}
.solution-panel {
  min-height: 400px;
  padding: 34px clamp(34px,4.5vw,64px) 46px;
  gap: clamp(42px,6vw,82px)
}
.solution-panel-copy {
  max-width: 470px
}
.solution-panel-copy h3 {
  color: #f7f7f3;
  font-size: 40px;
  font-weight: 650;
  line-height: 1.12
}
.solution-panel-copy p {
  color: rgba(247,247,243,.68);
  font-size: 16.5px;
  line-height: 1.72
}
.solution-points li {
  color: rgba(247,247,243,.76)
}
.solution-points li::before {
  border-color: var(--oct-orange);
  background: var(--oct-orange)
}
.solution-mock {
  height: clamp(310px,38vh,390px);
  border-color: rgba(255,255,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.045);
  box-shadow: none
}
.solution-panel-link {
  color: #ff8b52
}
.solution-panel-link:focus-visible,
.solution-panel-link:hover {
  color: #ffb18b
}
.enterprise-graph-frame,
.idea-flow-visual {
  border: 0;
  border-radius: 0;
  background: 0 0;
  box-shadow: none
}
.idea-flow-visual {
  padding-inline: clamp(6px,2vw,24px)
}
.obsidian-graph {
  min-height: 430px
}
.asset-module-grid {
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-auto-rows: minmax(184px,auto);
  gap: 14px
}
.asset-module-card {
  position: relative;
  min-height: 184px;
  padding: 20px;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  box-shadow: 0 14px 38px rgba(16,24,33,.055);
  transition: color 220ms,background-color 220ms,border-color 220ms,transform 220ms
}
.asset-module-card::after {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 34px;
  height: 1px;
  content: "";
  background: rgba(16,24,33,.16);
  box-shadow: 0 -6px 0 rgba(16,24,33,.09),0 -12px 0 rgba(16,24,33,.05);
  transition: width 220ms,background-color 220ms,box-shadow 220ms
}
#assets .asset-module-card span {
  width: min(100%,138px);
  min-height: 18px;
  padding-inline: 10px;
  border-radius: 999px;
  color: #9c431a;
  background: rgba(239,107,46,.1);
  font-size: 10.5px
}
.asset-module-card h3 {
  margin-top: 16px;
  color: #111a25;
  font-size: 20px;
  line-height: 1.25
}
#assets .asset-module-card p,
.asset-module-card p {
  margin-top: 9px;
  color: rgba(16,24,33,.58);
  font-size: 13px;
  line-height: 1.6
}
.asset-module-card:focus-within,
.asset-module-card:hover {
  color: #1b130f;
  border-color: rgba(239,107,46,.58);
  background: rgba(239,107,46,.16);
  transform: translateY(-2px)
}
.asset-module-card:focus-within::after,
.asset-module-card:hover::after {
  width: 52px;
  background: var(--oct-orange);
  box-shadow: 0 -6px 0 rgba(239,107,46,.48),0 -12px 0 rgba(239,107,46,.24)
}
.site-footer.cursor-footer {
  padding: 46px 36px 24px;
  background: #f6f5f2
}
.site-footer.cursor-footer .footer-layout {
  width: min(var(--oct-inner),calc(100% - 72px));
  max-width: var(--oct-inner);
  grid-template-columns: minmax(280px,1fr) minmax(360px,0.72fr);
  gap: clamp(48px,8vw,112px)
}
.footer-brand-block {
  gap: 14px
}
.footer-brand-block p {
  font-size: 14px
}
.footer-columns {
  grid-template-columns: repeat(2,minmax(130px,1fr));
  gap: 38px
}
.site-footer.cursor-footer .footer-bottom {
  margin-top: 34px;
  padding-top: 18px
}
@keyframes solutionTabProgress {
  from {
    transform: scaleX(0)
  }
  to {
    transform: scaleX(1)
  }
}
@media (max-width:980px) {
  :root {
    --oct-section-y: 84px
  }
  .hero h1 {
    font-size: 64px
  }
  #assets-title,
  #creators-title,
  #enterprise-title,
  .enterprise-copy h2,
  .section-heading h2,
  .section-heading.compact h2 {
    font-size: 48px
  }
  #solutions-title {
    font-size: 58px
  }
  .assets-layout,
  .enterprise-layout,
  .two-column {
    grid-template-columns: 1fr;
    gap: 54px;
    min-height: auto
  }
  .enterprise-copy,
  .section-heading,
  .section-heading.compact {
    max-width: 680px
  }
  .asset-module-grid {
    grid-auto-rows: minmax(176px,auto)
  }
}
@media (max-width:720px) {
  :root {
    --oct-menu-size: 56px;
    --oct-section-y: 70px;
    --oct-section-min: auto
  }
  .hero-pills-strip,
  .site-header {
    padding-inline: 18px
  }
  .hero {
    min-height: calc(100svh - var(--oct-menu-size));
    padding: 100px 20px 48px
  }
  .hero-content {
    width: 100%;
    gap: 22px
  }
  .hero h1 {
    max-width: 100%;
    padding: 0;
    font-size: 50px;
    line-height: 1.01
  }
  .hero-copy {
    width: 100%;
    padding: 15px 16px;
    background: rgba(255,255,255,.22);
    font-size: 15px;
    line-height: 1.72
  }
  .hero-pills {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto
  }
  .hero-pill {
    flex: 0 0 auto
  }
  #assets,
  #enterprise,
  #platform,
  #solutions,
  .section,
  .section-panel,
  .solutions-section {
    min-height: auto;
    padding: var(--oct-section-y) 20px
  }
  .section-inner,
  .solution-title-wrap {
    width: 100%
  }
  #assets-title,
  #creators-title,
  #enterprise-title,
  .enterprise-copy h2,
  .section-heading h2,
  .section-heading.compact h2 {
    font-size: 40px
  }
  #solutions-title {
    font-size: 48px
  }
  #assets .section-heading > p:not(.section-kicker),
  #platform .two-column > div:first-child > p:not(.section-kicker),
  .enterprise-copy p,
  .section-heading p {
    font-size: 16px
  }
  .solution-reveal.is-open .solution-stage,
  .solution-stage {
    width: calc(100vw - 32px);
    min-height: 620px
  }
  .solution-panel {
    min-height: 540px;
    padding: 28px 22px 30px;
    gap: 28px
  }
  .solution-mock {
    height: 270px
  }
  .idea-flow-visual {
    padding: 0
  }
  .obsidian-graph {
    min-height: 340px
  }
  .asset-module-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: minmax(176px,auto)
  }
  .site-footer.cursor-footer {
    padding: 42px 20px 22px
  }
  .site-footer.cursor-footer .footer-layout {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 34px
  }
  .solution-mock-assistant {
    height: 330px
  }
}
@media (max-width:480px) {
  .hero h1 {
    font-size: 42px;
    line-height: 1.04
  }
  .hero h1 span {
    white-space: normal
  }
  #assets-title,
  #creators-title,
  #enterprise-title,
  .enterprise-copy h2,
  .section-heading h2,
  .section-heading.compact h2 {
    font-size: 38px
  }
  #solutions-title {
    font-size: 42px
  }
  .asset-module-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto
  }
  .asset-module-card {
    min-height: 164px
  }
}
@media (max-width:360px) {
  .hero h1 {
    font-size: 38px
  }
}
@media (prefers-reduced-motion:reduce) {
  .solution-tab.is-active::after {
    animation: none;
    transform: scaleX(1)
  }
  .asset-module-card {
    transition: none
  }
}
.assistant-head {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: rgba(247,247,243,.48);
  font-size: 11px;
  font-weight: 650
}
.assistant-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(247,247,243,.82)
}
.assistant-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oct-orange)
}
@keyframes assistantDot {
  0%,
  100% {
    opacity: .3;
    transform: translateY(0)
  }
  50% {
    opacity: 1;
    transform: translateY(-2px)
  }
}
@keyframes assistantUserCycle {
  0%,
  100%,
  4%,
  96% {
    opacity: 0;
    transform: translateY(5px)
  }
  10%,
  88% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes assistantThinkingCycle {
  0%,
  100%,
  16%,
  42% {
    opacity: 0;
    transform: translateY(4px)
  }
  22%,
  36% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes assistantReplyCycle {
  0%,
  100%,
  38%,
  96% {
    opacity: 0;
    transform: translateY(5px)
  }
  46%,
  88% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes assistantRouteDraw {
  0%,
  42% {
    stroke-dashoffset: 1;
    opacity: .15
  }
  58%,
  88% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: .15
  }
}
@keyframes assistantNodeA {
  0%,
  100%,
  50%,
  62% {
    color: rgba(247,247,243,.52);
    border-color: rgba(255,255,255,.1);
    background: #1b1e23
  }
  54%,
  59% {
    color: #17191e;
    border-color: var(--oct-orange);
    background: var(--oct-orange)
  }
}
@keyframes assistantNodeB {
  0%,
  100%,
  60%,
  74% {
    color: rgba(247,247,243,.52);
    border-color: rgba(255,255,255,.1);
    background: #1b1e23
  }
  65%,
  71% {
    color: #17191e;
    border-color: var(--oct-orange);
    background: var(--oct-orange)
  }
}
@keyframes assistantNodeC {
  0%,
  100%,
  72%,
  88% {
    color: rgba(247,247,243,.52);
    border-color: rgba(255,255,255,.1);
    background: #1b1e23
  }
  78%,
  84% {
    color: #17191e;
    border-color: var(--oct-orange);
    background: var(--oct-orange)
  }
}
@keyframes assistantSignalA {
  0%,
  100%,
  48%,
  61% {
    left: 19%;
    opacity: 0
  }
  51% {
    opacity: 1
  }
  59% {
    left: calc(100% - 86px);
    opacity: 1
  }
}
@keyframes assistantSignalB {
  0%,
  100%,
  60%,
  73% {
    left: 19%;
    opacity: 0
  }
  63% {
    opacity: 1
  }
  71% {
    left: calc(100% - 86px);
    opacity: 1
  }
}
@keyframes assistantSignalC {
  0%,
  100%,
  72%,
  86% {
    left: 19%;
    opacity: 0
  }
  75% {
    opacity: 1
  }
  83% {
    left: calc(100% - 86px);
    opacity: 1
  }
}
@keyframes briefInputCycle {
  0%,
  100%,
  6%,
  92% {
    opacity: .55;
    transform: translateX(-5px)
  }
  14%,
  80% {
    opacity: 1;
    transform: translateX(0)
  }
}
@keyframes briefLineCycle {
  0%,
  18% {
    stroke-dashoffset: 1
  }
  42%,
  84% {
    stroke-dashoffset: 0
  }
  100% {
    stroke-dashoffset: -1
  }
}
@keyframes briefPulseCycle {
  0%,
  100%,
  20%,
  54% {
    left: 2%;
    opacity: 0
  }
  25% {
    opacity: 1
  }
  49% {
    left: calc(100% - 9px);
    opacity: 1
  }
}
@keyframes briefDocumentCycle {
  0%,
  100%,
  34% {
    opacity: .48;
    transform: translateY(5px)
  }
  48%,
  88% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes briefRowFill {
  0%,
  100%,
  42% {
    transform: scaleX(0)
  }
  62%,
  90% {
    transform: scaleX(1)
  }
}
@keyframes briefReadyCycle {
  0%,
  60% {
    opacity: 0;
    transform: translateY(3px)
  }
  72%,
  90% {
    opacity: 1;
    transform: translateY(0)
  }
  100% {
    opacity: 0
  }
}
@keyframes briefStepCycle {
  0%,
  100%,
  34%,
  8% {
    color: rgba(247,247,243,.34);
    background: 0 0
  }
  14%,
  28% {
    color: #17191e;
    background: var(--oct-orange)
  }
}
@keyframes journeyProgress {
  0%,
  4% {
    stroke-dashoffset: 1
  }
  72%,
  88% {
    stroke-dashoffset: 0
  }
  100% {
    stroke-dashoffset: -1
  }
}
@keyframes journeyDraw {
  0%,
  5% {
    stroke-dashoffset: 1;
    opacity: .2
  }
  22%,
  84% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: .2
  }
}
@keyframes journeyNode {
  0%,
  7% {
    opacity: 0;
    transform: scale(.7);
    transform-origin: center
  }
  18%,
  88% {
    opacity: 1;
    transform: scale(1)
  }
  100% {
    opacity: 0
  }
}
@keyframes journeyRunner {
  0%,
  4% {
    offset-distance: 0%;
    opacity: 0
  }
  10% {
    opacity: 1
  }
  78%,
  88% {
    offset-distance: 100%;
    opacity: 1
  }
  100% {
    offset-distance: 100%;
    opacity: 0
  }
}
.about-page {
  background: var(--oct-paper)
}
.about-page .nav-link.is-current,
.coming-soon-page .nav-link.is-current,
.home-page .nav-link.is-current {
  color: var(--oct-ink)
}
.about-page .nav-link.is-current::after,
.coming-soon-page .nav-link.is-current::after,
.home-page .nav-link.is-current::after {
  transform: scaleX(1)
}
.about-overline {
  margin: 0 0 24px;
  color: var(--oct-orange-dark);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .16em
}
@keyframes aboutCourse {
  0%,
  8% {
    stroke-dashoffset: 1;
    opacity: .3
  }
  52%,
  82% {
    stroke-dashoffset: 0;
    opacity: 1
  }
  100% {
    stroke-dashoffset: -1;
    opacity: .3
  }
}
@keyframes videoScan {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0
  }
  12%,
  88% {
    opacity: .5
  }
  100% {
    transform: translateY(520px);
    opacity: 0
  }
}
@media (max-width:920px) {
  .site-nav {
    position: fixed;
    top: calc(var(--oct-menu-size) + 8px);
    left: 12px;
    right: 12px;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: calc(100svh - var(--oct-menu-size) - 24px);
    padding: 12px;
    overflow-y: auto;
    color: var(--oct-ink);
    border: 1px solid rgba(16,24,33,.1);
    border-radius: 8px;
    background: rgba(249,249,247,.98);
    box-shadow: 0 20px 54px rgba(16,24,33,.16);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px)
  }
  .site-nav.is-open {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px
  }
  .site-nav .nav-actions,
  .site-nav .nav-group {
    width: 100%;
    height: auto;
    min-height: 0;
    display: grid;
    align-items: stretch;
    gap: 6px
  }
  .site-nav .nav-actions {
    grid-template-columns: 1fr 1fr;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid rgba(16,24,33,.09)
  }
  .site-nav .has-mega,
  .site-nav .nav-item {
    width: 100%;
    height: auto;
    min-height: 0
  }
  .site-nav .contact-link,
  .site-nav .lang-toggle,
  .site-nav .nav-link {
    position: relative;
    width: 100%;
    min-height: 40px;
    padding: 0 12px;
    justify-content: space-between;
    color: rgba(16,24,33,.78);
    border: 1px solid rgba(16,24,33,.09);
    border-radius: 6px;
    background: rgba(255,255,255,.58);
    font-size: 14px
  }
  .site-nav .lang-toggle:focus-visible,
  .site-nav .lang-toggle:hover,
  .site-nav .nav-link:focus-visible,
  .site-nav .nav-link:hover {
    color: var(--oct-ink);
    background: rgba(16,24,33,.055)
  }
  .site-nav .contact-link:focus-visible,
  .site-nav .contact-link:hover {
    color: #fff;
    border-color: #111827;
    background: #111827
  }
  .site-nav .mega-panel {
    margin-top: 6px;
    padding: 14px;
    border-radius: 6px;
    background: #fff
  }
  .site-nav .mega-intro h2 {
    font-size: 22px
  }
  .site-nav .mega-list a {
    padding: 12px 0
  }
}
.solution-mock-assistant {
  height: 330px;
  padding: 0;
  overflow: hidden;
  color: #f7f7f3;
  background: #1b1e23
}
.about-main {
  overflow: visible
}
.about-tabs-main {
  overflow: visible;
  background: var(--oct-paper)
}
.about-film-section,
.about-tabs-section {
  width: min(var(--oct-inner),calc(100% - 72px));
  margin: 0 auto
}
.about-tabs-section {
  padding: 148px 0 104px
}
.about-tabs-heading {
  display: grid;
  grid-template-columns: minmax(0,0.62fr) minmax(420px,1.38fr);
  align-items: end;
  gap: 72px;
  margin-bottom: 58px
}
.about-tabs-heading .about-overline {
  margin-bottom: 4px
}
.about-tabs-heading h1 {
  margin: 0;
  color: var(--oct-ink);
  font-size: 56px;
  font-weight: 680;
  line-height: 1.08;
  text-wrap: balance
}
.about-tab-list {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-top: 1px solid var(--oct-line-strong);
  border-bottom: 1px solid var(--oct-line-strong)
}
.about-tab {
  position: relative;
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 0 22px;
  border: 0;
  border-right: 1px solid var(--oct-line);
  border-radius: 0;
  color: var(--oct-ink-muted);
  background: 0 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 180ms,background-color 180ms
}
.about-tab:last-child {
  border-right: 0
}
.about-tab::after {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -1px;
  height: 2px;
  content: "";
  background: var(--oct-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms
}
.about-tab span {
  color: var(--oct-orange-dark);
  font-size: 10px;
  font-weight: 760
}
.about-tab b {
  font-size: 14px;
  font-weight: 670
}
.about-tab.is-active,
.about-tab:focus-visible,
.about-tab:hover {
  color: var(--oct-ink);
  background: rgba(255,255,255,.48)
}
.about-tab.is-active::after {
  transform: scaleX(1)
}
.about-tab-panels {
  border-bottom: 1px solid var(--oct-line-strong)
}
.about-tab-panel {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  background: var(--oct-paper-soft);
  animation: 420ms cubic-bezier(.22,1,.36,1) both aboutPanelIn
}
.about-tab-panel[hidden] {
  display: none
}
.about-tab-image {
  position: relative;
  min-width: 0;
  min-height: 620px;
  margin: 0;
  overflow: hidden;
  background: #e6e5e1
}
.about-tab-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.9) contrast(.98);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1)
}
.about-tab-panel.is-active .about-tab-image img {
  transform: scale(1.018)
}
.about-tab-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 54px clamp(38px,4vw,72px)
}
.about-tab-copy h2 {
  max-width: 610px;
  margin: 18px 0 24px;
  color: var(--oct-ink);
  font-size: 42px;
  font-weight: 680;
  line-height: 1.14;
  text-wrap: balance
}
.about-tab-copy > p:not(.section-kicker) {
  max-width: 650px;
  margin: 0;
  color: var(--oct-ink-soft);
  font-size: 16px;
  line-height: 1.78
}
.about-tab-facts {
  margin: 34px 0 0;
  border-top: 1px solid var(--oct-line)
}
.about-tab-facts > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 22px;
  padding: 15px 0;
  border-bottom: 1px solid var(--oct-line)
}
.about-tab-facts dt {
  color: var(--oct-ink-muted);
  font-size: 11px
}
.about-tab-facts dd {
  margin: 0;
  color: var(--oct-ink);
  font-size: 13px;
  line-height: 1.55
}
.about-service-list {
  margin-top: 12px;
  border-top: 1px solid var(--oct-line)
}
.about-service-list > div {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 5px 14px;
  padding: 17px 0;
  border-bottom: 1px solid var(--oct-line)
}
.about-service-list span {
  grid-row: 1/3;
  color: var(--oct-orange-dark);
  font-size: 9px;
  font-weight: 760
}
.about-service-list h3 {
  margin: 0;
  color: var(--oct-ink);
  font-size: 15px;
  line-height: 1.4
}
.about-service-list p {
  margin: 0;
  color: var(--oct-ink-soft);
  font-size: 12px;
  line-height: 1.65
}
.about-tab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 34px
}
.about-tab-actions a,
.about-tab-actions button {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: var(--oct-orange-dark);
  background: 0 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer
}
.about-film-section {
  display: grid;
  grid-template-columns: minmax(280px,0.34fr) minmax(0,1fr);
  gap: 72px;
  align-items: start;
  padding: 104px 0 112px
}
.about-film-copy h2 {
  margin: 18px 0 22px;
  color: var(--oct-ink);
  font-size: 36px;
  font-weight: 680;
  line-height: 1.16
}
.about-film-copy > p:last-child {
  margin: 0;
  color: var(--oct-ink-soft);
  font-size: 14px;
  line-height: 1.75
}
.about-film-frame {
  position: relative;
  aspect-ratio: 16/8.5;
  overflow: hidden;
  border-radius: 4px;
  color: #fff;
  background: #777
}
.about-film-frame::after {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 1;
  pointer-events: none;
  background: rgba(12,16,20,.16)
}
.about-film-frame > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover
}
.about-film-frame > video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #777
}
.about-film-frame > div {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: rgba(255,255,255,.82);
  font-size: 10px;
  pointer-events: none
}
@keyframes aboutPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
@media (max-width:980px) {
  .about-tabs-heading {
    grid-template-columns: 1fr;
    gap: 18px
  }
  .about-tab-panel {
    min-height: 0;
    grid-template-columns: 1fr
  }
  .about-tab-image {
    min-height: 0;
    aspect-ratio: 16/8.8
  }
  .about-tab-copy {
    padding: 48px
  }
  .about-film-section {
    grid-template-columns: 1fr;
    gap: 38px
  }
}
@media (max-width:720px) {
  .solution-mock-assistant {
    height: 310px
  }
  .assistant-chat-set,
  .assistant-chat-window {
    height: 264px
  }
  .about-film-section,
  .about-tabs-section {
    width: calc(100% - 40px)
  }
  .about-tabs-section {
    padding: 112px 0 72px
  }
  .about-tabs-heading {
    margin-bottom: 38px
  }
  .about-tabs-heading h1 {
    font-size: 40px
  }
  .about-tab-list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none
  }
  .about-tab-list::-webkit-scrollbar {
    display: none
  }
  .about-tab {
    min-width: 190px;
    min-height: 66px;
    padding: 0 16px
  }
  .about-tab::after {
    left: 16px;
    right: 16px
  }
  .about-tab-image {
    aspect-ratio: 4/3
  }
  .about-tab-copy {
    padding: 34px 24px 40px
  }
  .about-tab-copy h2 {
    margin-top: 14px;
    font-size: 32px
  }
  .about-tab-copy > p:not(.section-kicker) {
    font-size: 15px
  }
  .about-tab-facts > div {
    grid-template-columns: 76px 1fr;
    gap: 16px
  }
  .about-film-section {
    padding: 72px 0 82px
  }
  .about-film-copy h2 {
    font-size: 32px
  }
  .about-film-frame {
    aspect-ratio: 4/3
  }
}
@media (prefers-reduced-motion:reduce) {
  .about-tab-panel {
    animation: none
  }
  .about-tab-image img {
    transition: none;
    transform: none
  }
}
.solution-mock-consult {
  height: 330px;
  overflow: hidden;
  color: #f7f7f3;
  background: #1b1e23
}
.consult-head {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
  color: rgba(247,247,243,.48);
  font-size: 10px;
  font-weight: 650
}
.consult-flow {
  min-height: 226px;
  display: grid;
  grid-template-columns: minmax(120px,1fr) 74px minmax(130px,1fr);
  align-items: center;
  gap: 12px;
  padding: 22px
}
.consult-card {
  min-height: 142px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 5px;
  background: rgba(255,255,255,.035)
}
.consult-card > span {
  display: block;
  color: var(--oct-orange);
  font-size: 8px;
  font-weight: 780
}
.consult-card strong {
  display: block;
  margin: 14px 0 18px;
  color: rgba(247,247,243,.86);
  font-size: 12px;
  line-height: 1.45
}
.consult-request > i {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 9px;
  background: rgba(247,247,243,.14)
}
.consult-request > i:nth-of-type(2) {
  width: 74%
}
.consult-request > i:nth-of-type(3) {
  width: 48%
}
.consult-response p {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0
}
.consult-response b {
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 3px;
  color: rgba(247,247,243,.52);
  font-size: 8px;
  font-weight: 620
}
.consult-route {
  position: relative;
  height: 1px;
  background: rgba(247,247,243,.12)
}
.consult-route i {
  position: absolute;
  inset: 0;
  background: var(--oct-orange);
  transform: scaleX(0);
  transform-origin: left;
  animation: 6s ease-in-out infinite consultLine
}
.consult-route span {
  position: absolute;
  left: 0;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--oct-orange);
  opacity: 0;
  animation: 6s ease-in-out infinite consultDot
}
.consult-request {
  animation: 6s ease-in-out infinite consultRequest
}
.consult-response {
  animation: 6s ease-in-out infinite consultResponse
}
.consult-progress {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(247,247,243,.42);
  font-size: 9px
}
.consult-progress i {
  width: 34px;
  height: 1px;
  background: rgba(247,247,243,.14)
}
@keyframes consultLine {
  0%,
  100%,
  20% {
    transform: scaleX(0)
  }
  45%,
  88% {
    transform: scaleX(1)
  }
}
@keyframes consultDot {
  0%,
  20% {
    left: 0;
    opacity: 0
  }
  26% {
    opacity: 1
  }
  47%,
  78% {
    left: calc(100% - 7px);
    opacity: 1
  }
  100%,
  90% {
    opacity: 0
  }
}
@keyframes consultRequest {
  0%,
  100%,
  8%,
  94% {
    opacity: .52;
    transform: translateY(4px)
  }
  18%,
  82% {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes consultResponse {
  0%,
  38% {
    opacity: .36;
    transform: translateY(4px)
  }
  54%,
  88% {
    opacity: 1;
    transform: translateY(0)
  }
  100% {
    opacity: .36
  }
}
@keyframes workflowTravel {
  0%,
  100%,
  5% {
    transform: scaleX(0)
  }
  72%,
  88% {
    transform: scaleX(1)
  }
}
@keyframes workflowStep {
  0%,
  100%,
  8%,
  92% {
    opacity: .55;
    transform: translateY(8px)
  }
  18%,
  78% {
    opacity: 1;
    transform: translateY(0)
  }
}
#assets .asset-module-card {
  counter-increment: asset-module;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--oct-line-strong);
  border-bottom: 1px solid var(--oct-line-strong);
  box-shadow: none
}
#assets .asset-module-card::before {
  position: absolute;
  right: 20px;
  top: 20px;
  content: "0" counter(asset-module);
  color: rgba(16,24,33,.28);
  font-size: 9px;
  font-weight: 720
}
#assets .asset-module-card::after {
  position: absolute;
  left: 24px;
  bottom: 20px;
  width: 24px;
  height: 1px;
  content: "";
  background: var(--oct-orange);
  transition: width 220ms
}
#assets .asset-module-card > span {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  color: var(--oct-orange-dark)
}
#assets .asset-module-card h3 {
  color: var(--oct-ink);
  font-weight: 670
}
#assets .asset-module-card p {
  color: var(--oct-ink-soft)
}
#assets .asset-module-card:focus-within::after,
#assets .asset-module-card:hover::after {
  width: calc(100% - 48px)
}
@media (max-width:720px) {
  .solution-mock-consult {
    height: 310px
  }
  .consult-flow {
    min-height: 206px;
    grid-template-columns: minmax(104px,1fr) 36px minmax(108px,1fr);
    gap: 7px;
    padding: 14px
  }
  .consult-card {
    min-height: 132px;
    padding: 11px
  }
  .consult-card strong {
    font-size: 10px
  }
  .consult-response b {
    padding: 4px
  }
  #assets .asset-module-card {
    min-height: 174px;
    padding: 22px 18px
  }
  #assets .asset-module-card::after {
    left: 18px
  }
}
@media (prefers-reduced-motion:reduce) {
  .consult-request,
  .consult-response,
  .consult-route i,
  .consult-route span {
    animation: none
  }
  .consult-route i {
    transform: scaleX(1)
  }
  .consult-request,
  .consult-response {
    opacity: 1;
    transform: none
  }
}
#assets .asset-module-grid {
  counter-reset: asset-module;
  gap: 0;
  border-top: 1px solid var(--oct-line-strong);
  border-left: 1px solid var(--oct-line-strong);
  gap: 12px;
  border: 0;
  background: 0 0
}
#assets .asset-module-card {
  min-height: 186px;
  padding: 28px 26px 24px;
  border: 0;
  border-radius: 8px;
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px rgba(16,24,33,.07);
  transition: background-color 180ms,box-shadow 180ms,transform 180ms
}
#assets .asset-module-card::after,
#assets .asset-module-card::before {
  content: none
}
#assets .asset-module-card > span {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--oct-orange-dark);
  background: 0 0;
  font-size: 10px;
  font-weight: 700
}
#assets .asset-module-card h3 {
  max-width: 100%;
  margin: 24px 0 10px;
  color: var(--oct-ink);
  font-size: 19px;
  font-weight: 650;
  line-height: 1.3
}
#assets .asset-module-card p {
  max-width: 100%;
  margin: 0;
  color: var(--oct-ink-soft);
  font-size: 13px;
  line-height: 1.65
}
#assets .asset-module-card:focus-within,
#assets .asset-module-card:hover {
  background: rgba(255,255,255,.9);
  box-shadow: inset 0 0 0 1px rgba(239,107,46,.4);
  transform: translateY(-2px)
}
@media (max-width:720px) {
  #assets .asset-module-card {
    min-height: 164px;
    padding: 22px 20px
  }
  #assets .asset-module-card h3 {
    margin-top: 18px;
    font-size: 17px
  }
}

/* Final typography scale and minimal asset hover. */
body {
  font-size: 17px
}
.site-nav .nav-link {
  font-size: 15px
}
.site-nav .contact-link,
.site-nav .lang-toggle {
  font-size: 14px
}
.hero h1 {
  font-size: 84px
}
.hero-copy {
  font-size: 18px
}
.hero-pill {
  font-size: 15px
}
.section-kicker {
  font-size: 15px
}
#assets-title,
#creators-title,
#enterprise-title,
.enterprise-copy h2,
.section-heading h2,
.section-heading.compact h2 {
  font-size: 56px
}
#solutions-title {
  font-size: 70px
}
#assets .section-heading > p:not(.section-kicker),
#platform .two-column > div:first-child > p:not(.section-kicker),
.enterprise-copy p,
.section-heading p {
  font-size: 18px
}
.learn-more,
.solution-panel-link {
  font-size: 16px
}
.solution-panel-copy h3 {
  font-size: 42px
}
.solution-panel-copy p {
  font-size: 17.5px
}
.solution-points li {
  font-size: 14px
}
.assistant-head,
.consult-head,
.mail-head {
  font-size: 11px
}
.chat-row p,
.consult-card strong {
  font-size: 12px
}
.consult-progress,
.sketch-workflow-labels small {
  font-size: 10px
}
.sketch-workflow-labels strong {
  font-size: 14px
}
#assets .asset-module-card > span {
  font-size: 11px
}
#assets .asset-module-card h3 {
  font-size: 20px
}
#assets .asset-module-card p {
  font-size: 14px
}
.about-tabs-heading h1 {
  font-size: 58px
}
.about-tab b {
  font-size: 15px
}
.about-tab-copy h2 {
  font-size: 44px
}
.about-tab-copy > p:not(.section-kicker) {
  font-size: 17px
}
.about-tab-facts dt {
  font-size: 12px
}
.about-tab-facts dd {
  font-size: 14px
}
.about-service-list h3 {
  font-size: 16px
}
.about-service-list p {
  font-size: 13px
}
.about-film-copy > p:last-child,
.footer-brand-block p,
.footer-columns a,
.footer-text-button {
  font-size: 15px
}
#assets .asset-module-card:hover,
#assets .asset-module-card:focus-within {
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 0 0 1px var(--oct-orange);
  transform: none
}

@media (max-width:720px) {
  .hero h1 {
    font-size: 48px
  }
  #solutions-title {
    font-size: 42px
  }
  #assets-title,
  #creators-title,
  #enterprise-title,
  .enterprise-copy h2,
  .section-heading h2,
  .section-heading.compact h2 {
    font-size: 38px
  }
  .about-tabs-heading h1 {
    font-size: 42px
  }
  .about-tab-copy h2 {
    font-size: 34px
  }
  #assets .asset-module-card h3 {
    font-size: 18px
  }
}

/* Contrast-safe asset hover and fullscreen film action. */
#assets .asset-module-card:hover > span,
#assets .asset-module-card:focus-within > span {
  color: var(--oct-orange-dark);
  border: 0;
  background: transparent
}
#assets .asset-module-card:hover h3,
#assets .asset-module-card:focus-within h3 {
  color: var(--oct-ink)
}
#assets .asset-module-card:hover p,
#assets .asset-module-card:focus-within p {
  color: var(--oct-ink-soft)
}
.about-film-action {
  position: absolute;
  z-index: 4;
  right: 18px;
  top: 18px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 8px;
  color: #fff;
  background: rgba(16,24,33,.48);
  cursor: pointer;
  transform: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 180ms ease,border-color 180ms ease,transform 180ms ease
}
.about-film-action span {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1.5px solid #fff
}
.about-film-action span::before,
.about-film-action span::after {
  position: absolute;
  content: "";
  background: var(--oct-orange)
}
.about-film-action span::before {
  right: -3px;
  top: 3px;
  width: 7px;
  height: 1.5px
}
.about-film-action span::after {
  right: 3px;
  top: -3px;
  width: 1.5px;
  height: 7px
}
.about-film-action:hover,
.about-film-action:focus-visible {
  border-color: var(--oct-orange);
  background: rgba(16,24,33,.78);
  transform: translateY(-1px)
}
.about-film-frame:fullscreen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  background: #000
}
.about-film-frame:fullscreen video {
  object-fit: contain
}
.about-film-frame:fullscreen .about-film-action {
  opacity: 0;
  pointer-events: none
}
@media (max-width:720px) {
  .about-film-action {
    right: 12px;
    top: 12px;
    width: 42px;
    height: 42px
  }
}

body.video-expanded { overflow: hidden }
body.video-expanded::before {
  position: fixed;
  z-index: 999;
  inset: 0;
  content: "";
  background: rgba(16,18,20,.68);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px)
}
.about-film-frame.is-expanded {
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  width: min(92vw,1280px);
  height: auto;
  max-width: none;
  aspect-ratio: 16/9;
  overflow: visible;
  border-radius: 8px;
  background: #000;
  box-shadow: 0 28px 90px rgba(0,0,0,.38);
  transform: translate(-50%,-50%)
}
.about-film-frame.is-expanded video {
  object-fit: contain
}
.about-film-frame.is-expanded .about-film-action {
  left: auto;
  right: 22px;
  top: 22px;
  width: 46px;
  height: 46px;
  transform: none
}
.about-film-frame.is-expanded .about-film-action:hover,
.about-film-frame.is-expanded .about-film-action:focus-visible {
  transform: scale(1.04)
}
.about-film-frame.is-expanded .about-film-action span {
  position: relative;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 0
}
.about-film-frame.is-expanded .about-film-action span::before,
.about-film-frame.is-expanded .about-film-action span::after {
  position: absolute;
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
  content: "";
  background: #fff
}
.about-film-frame.is-expanded .about-film-action span::before {
  transform: rotate(45deg)
}
.about-film-frame.is-expanded .about-film-action span::after {
  transform: rotate(-45deg)
}

/* Persistent, cross-browser video controls: they remain visible instead of
   relying on browser-specific hover controls. */
.about-player-controls {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: grid;
  grid-template-columns: 36px minmax(80px,1fr) auto 36px 36px;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background: rgba(12,16,20,.62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px)
}
.film-control-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: transparent;
  cursor: pointer
}
.film-control-button:hover,
.film-control-button:focus-visible { background: rgba(255,255,255,.14) }
.film-control-button span { position: relative; display: block }
.film-play-button span {
  width: 0;
  height: 0;
  margin-left: 3px;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid #fff
}
.about-film-frame.is-playing .film-play-button span {
  width: 11px;
  height: 14px;
  margin-left: 0;
  border: 0;
  background: linear-gradient(90deg,#fff 0 3px,transparent 3px 8px,#fff 8px)
}
.film-volume-button span {
  width: 7px;
  height: 10px;
  background: #fff
}
.film-volume-button span::before {
  position: absolute;
  left: -6px;
  top: 2px;
  width: 0;
  height: 0;
  content: "";
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-right: 6px solid #fff
}
.film-volume-button span::after {
  position: absolute;
  left: 10px;
  top: 1px;
  width: 7px;
  height: 7px;
  content: "";
  border-top: 1.5px solid #fff;
  border-right: 1.5px solid #fff;
  border-radius: 0 8px 0 0;
  transform: rotate(45deg)
}
.film-fullscreen-button span {
  width: 14px;
  height: 14px;
  border: 1.5px solid #fff
}
.film-progress {
  width: 100%;
  height: 4px;
  margin: 0;
  accent-color: var(--oct-orange);
  cursor: pointer
}
.film-time {
  min-width: 76px;
  color: rgba(255,255,255,.88);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap
}
.about-film-frame.is-expanded .about-player-controls {
  left: 24px;
  right: 24px;
  bottom: 22px
}
.about-film-frame.is-expanded .about-film-caption { bottom: 88px }
@media (max-width:720px) {
  .about-film-frame.is-expanded { width: calc(100vw - 24px) }
  .about-player-controls {
    left: 10px;
    right: 10px;
    bottom: 10px;
    grid-template-columns: 32px minmax(40px,1fr) 32px 32px;
    gap: 5px;
    min-height: 42px
  }
  .film-control-button { width: 32px; height: 32px }
  .film-time { display: none }
  .about-film-caption { display: none }
}

/* Coming soon / unfinished pages */
.coming-soon-page {
  background: var(--oct-paper)
}
.coming-soon-main {
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--oct-menu-size));
  padding: calc(var(--oct-menu-size) + 48px) 36px 72px;
  background:
    radial-gradient(ellipse 70% 55% at 18% 12%, rgba(242, 106, 33, 0.08), transparent 58%),
    radial-gradient(ellipse 55% 45% at 88% 78%, rgba(17, 24, 39, 0.05), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0)),
    var(--oct-paper)
}
.coming-soon-panel {
  position: relative;
  width: min(640px, 100%);
  padding: 48px 0 8px;
  text-align: left;
  overflow: hidden
}
.coming-soon-glow {
  position: absolute;
  top: -40px;
  left: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(242, 106, 33, 0.16), transparent 68%);
  pointer-events: none;
  animation: comingSoonGlow 7.5s ease-in-out infinite
}
.coming-soon-panel .about-overline {
  position: relative;
  margin-bottom: 18px;
  animation: comingSoonRise 700ms cubic-bezier(0.22, 1, 0.36, 1) both
}
.coming-soon-panel h1 {
  position: relative;
  margin: 0 0 22px;
  color: var(--oct-ink);
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -0.02em;
  animation: comingSoonRise 850ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both
}
.coming-soon-copy {
  position: relative;
  margin: 0 0 36px;
  max-width: 34em;
  color: var(--oct-ink-soft);
  font-size: 16px;
  line-height: 1.7;
  animation: comingSoonRise 900ms cubic-bezier(0.22, 1, 0.36, 1) 140ms both
}
.coming-soon-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  animation: comingSoonRise 950ms cubic-bezier(0.22, 1, 0.36, 1) 200ms both
}
.coming-soon-actions a,
.coming-soon-actions button {
  padding: 0 0 3px;
  border: 0;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  color: var(--oct-orange-dark);
  background: 0 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease
}
.coming-soon-actions a:hover,
.coming-soon-actions a:focus-visible,
.coming-soon-actions button:hover,
.coming-soon-actions button:focus-visible {
  color: var(--oct-ink)
}
@keyframes comingSoonRise {
  from {
    opacity: 0;
    transform: translateY(18px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes comingSoonGlow {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.7
  }
  50% {
    transform: translate(18px, 12px) scale(1.12);
    opacity: 1
  }
}
@media (prefers-reduced-motion: reduce) {
  .coming-soon-glow,
  .coming-soon-panel .about-overline,
  .coming-soon-panel h1,
  .coming-soon-copy,
  .coming-soon-actions {
    animation: none
  }
}
@media (max-width:720px) {
  .coming-soon-main {
    padding: calc(var(--oct-menu-size) + 36px) 20px 56px;
    min-height: calc(100svh - var(--oct-menu-size))
  }
  .coming-soon-panel {
    padding-top: 24px
  }
  .coming-soon-copy {
    font-size: 15px
  }
}

/* Home: first viewport = hero only; pills replace top nav after scroll */
.home-page .hero {
  min-height: 100svh;
  box-sizing: border-box
}
@supports not (height: 100svh) {
  .home-page .hero {
    min-height: 100vh
  }
}
.home-page .site-header {
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease, background 180ms, border-color 180ms
}
.home-page.has-pills-nav .site-header,
.home-page .site-header.is-replaced {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none
}
.home-page .hero-pills-strip {
  position: sticky;
  top: 0;
  z-index: 110;
  height: var(--oct-menu-size);
  min-height: var(--oct-menu-size);
  transition: background 220ms ease, box-shadow 220ms ease, border-color 220ms ease
}
.home-page .hero-pills-strip.is-stuck {
  background: rgba(247, 247, 245, .88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .58) inset, 0 10px 28px rgba(16, 24, 33, .06)
}
.home-page .pills-sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  pointer-events: none
}
.home-page.has-pills-nav {
  scroll-padding-top: var(--oct-menu-size)
}
@media (prefers-reduced-motion: reduce) {
  .home-page .site-header,
  .home-page .hero-pills-strip {
    transition: none
  }
}
@media (max-width: 720px) {
  .home-page .hero {
    min-height: 100svh;
    padding-bottom: 56px
  }
}