:root {
  font-family:"Manrope","Noto Sans SC",sans-serif;
  color:#121b2e;
  background:#f6f8fc;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  --blue:#2458e7;
  --blue-soft:#e8efff;
  --ink:#121b2e;
  --muted:#68758b;
  --line:#dfe5ef;
  --paper:#f6f8fc;
  --mono:"DM Mono",monospace;
  --wrap:1200px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:88px;
  overflow-x:clip
}
body {
  margin:0;
  min-width:320px;
  background:var(--paper);
  overflow-x:hidden
}
a {
  color:inherit;
  text-decoration:none
}
img {
  display:block;
  max-width:100%
}
button {
  font:inherit
}
.section-wrap {
  width:min(var(--wrap),calc(100% - 96px));
  margin-inline:auto
}
.site-header {
  height:82px;
  padding:0 max(48px,calc((100% - var(--wrap))/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(18,27,46,.07);
  position:sticky;
  top:0;
  background:rgba(246,248,252,.9);
  backdrop-filter:blur(18px);
  z-index:20
}
.wordmark,.footer-brand {
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-.045em
}
.wordmark img {
  width:28px;
  height:28px;
  object-fit:contain
}
.wordmark span {
  font-size:18px
}
.main-nav {
  display:flex;
  gap:36px;
  font-size:12px;
  font-weight:600;
  color:#657187
}
.main-nav a {
  transition:color .2s
}
.main-nav a:hover {
  color:var(--blue)
}
.nav-cta {
  font-size:12px;
  font-weight:700;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 18px;
  transition:transform .2s,border-color .2s
}
.nav-cta:hover {
  transform:translateY(-2px);
  border-color:#9ab0ef
}
.nav-cta span {
  color:var(--blue);
  margin-left:10px
}
.menu-toggle {
  display:none
}
.hero {
  min-height:720px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  position:relative;
  padding:64px 0 100px
}
.hero-copy {
  position:relative;
  z-index:2;
  padding-top:14px
}
.eyebrow,.section-kicker,.micro-label,.detail-no,.gallery-index,.workbench-top,.arch-state,.server-top,.console-caption,.hero-facts i,.orbit-label {
  font-family:var(--mono);
  letter-spacing:.06em
}
.eyebrow {
  font-size:10px;
  color:#55637a;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:30px
}
.status-dot,.proof-dot,.console-led,.server-led,.live-indicator {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#45ba91;
  box-shadow:0 0 0 4px rgba(69,186,145,.12)
}
h1,h2,h3,p,figure {
  margin:0
}
h1 {
  font-size:clamp(48px,6.3vw,78px);
  letter-spacing:-.075em;
  line-height:1.13;
  font-weight:800
}
.ink-blue {
  color:var(--blue)
}
.hero-lead {
  max-width:440px;
  font-size:15px;
  line-height:1.9;
  color:#6e7a90;
  margin-top:24px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:31px
}
.button {
  display:inline-flex;
  align-items:center;
  gap:32px;
  padding:15px 20px;
  border-radius:7px;
  font-size:12px;
  font-weight:700;
  transition:transform .2s,background .2s
}
.button:hover {
  transform:translateY(-2px)
}
.button-dark {
  background:var(--ink);
  color:white
}
.button-dark:hover {
  background:#203864
}
.button span {
  font-size:16px
}
.text-link {
  font-size:12px;
  font-weight:700
}
.text-link span {
  color:var(--blue);
  margin-left:8px
}
.hero-facts {
  display:flex;
  gap:22px;
  border-top:1px solid var(--line);
  margin-top:54px;
  padding-top:18px;
  color:#7c8799;
  font-size:9px
}
.hero-facts i {
  font-style:normal;
  font-size:8px;
  color:var(--blue);
  margin-right:6px
}
.hero-visual {
  height:560px;
  position:relative;
  display:grid;
  place-items:center
}
.orbit {
  position:absolute;
  border:1px solid rgba(36,88,231,.12);
  border-radius:50%;
  transform:rotate(-24deg)
}
.orbit-one {
  width:570px;
  height:360px
}
.orbit-two {
  width:470px;
  height:510px;
  transform:rotate(38deg);
  border-color:rgba(36,88,231,.08)
}
.device {
  background:#fff;
  border:5px solid #fff;
  border-radius:32px;
  padding:0;
  box-shadow:0 25px 70px rgba(27,48,92,.2),0 0 0 1px rgba(23,46,91,.1);
  overflow:hidden
}
.device-screen {
  overflow:hidden;
  background:#eef2f6
}
.device-screen img {
  width:100%;
  height:auto
}
.device-hero {
  width:260px;
  z-index:2;
  position:relative;
  transform:rotate(2deg);
  animation:phone-float 7s ease-in-out infinite
}
.orbit-label {
  position:absolute;
  font-size:9px;
  color:#6e7fab;
  background:var(--paper);
  padding:6px 10px;
  z-index:3
}
.label-a {
  top:94px;
  right:38px
}
.label-b {
  bottom:88px;
  left:31px
}
.float-note {
  position:absolute;
  z-index:3;
  right:2%;
  bottom:62px;
  background:#fff;
  padding:14px 17px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #e1e8f4;
  border-radius:10px;
  box-shadow:0 12px 32px rgba(23,46,91,.09)
}
.note-check {
  width:25px;
  height:25px;
  border-radius:50%;
  background:#e7f7ef;
  color:#208d60;
  display:grid;
  place-items:center;
  font-size:13px
}
.float-note b,.float-note small {
  display:block
}
.float-note b {
  font-size:10px
}
.float-note small {
  font-size:9px;
  color:#8490a3;
  margin-top:3px
}
.note-arrow {
  color:var(--blue);
  margin-left:12px
}
.scroll-cue {
  position:absolute;
  bottom:30px;
  left:0;
  display:flex;
  align-items:center;
  gap:10px;
  font:9px var(--mono);
  letter-spacing:.06em;
  color:#8692a6
}
.scroll-cue span {
  width:30px;
  height:1px;
  background:var(--blue)
}
.section-kicker {
  font-size:9px;
  color:var(--blue);
  display:flex;
  align-items:center;
  gap:12px
}
.section-kicker span {
  border:1px solid #b4c5f5;
  border-radius:50%;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  font-size:8px
}
.intro {
  padding-top:95px;
  padding-bottom:120px
}
.intro-grid {
  display:grid;
  grid-template-columns:1.05fr .8fr;
  align-items:end;
  gap:100px;
  margin-top:30px
}
.intro h2,.architecture-head h2,.ocr-heading h2,.closing-copy h2 {
  font-size:clamp(39px,5.2vw,62px);
  line-height:1.22;
  letter-spacing:-.07em;
  font-weight:800
}
.muted {
  color:#a3adbd
}
.intro-copy {
  font-size:14px;
  line-height:2;
  color:#758197;
  max-width:420px;
  padding-bottom:7px
}
.app-gallery {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:55px
}
.gallery-card {
  height:620px;
  border:1px solid #e3e8f1;
  border-radius:10px;
  position:relative;
  overflow:hidden;
  padding:24px 25px;
  background:#edf2fc
}
.gallery-projects {
  background:#f0f1f5
}
.gallery-time {
  background:#edf2f8
}
.gallery-heading {
  display:flex;
  justify-content:space-between;
  color:#71809a
}
.micro-label,.gallery-index {
  font-size:8px
}
.gallery-card h3 {
  font-size:24px;
  line-height:1.45;
  letter-spacing:-.05em;
  margin-top:28px
}
.gallery-card p {
  font-size:10px;
  color:#778398;
  margin-top:7px
}
.phone-cut {
  position:absolute;
  width:174px;
  top:190px;
  left:50%;
  transform:translateX(-50%);
  border:4px solid #fff;
  border-radius:20px 20px 0 0;
  box-shadow:0 14px 35px rgba(33,50,88,.16);
  overflow:hidden
}
.phone-cut img {
  width:100%
}
.gallery-projects .phone-cut {
  width:178px;
  top:190px
}
.gallery-time .phone-cut {
  width:180px;
  top:190px
}
.evidence-caption {
  text-align:right;
  margin-top:15px;
  font-size:9px;
  color:#99a3b1
}
.agent-section {
  background:#111a2c;
  color:#f7f9ff;
  position:relative;
  overflow:hidden
}
.agent-section:before {
  content:"";
  position:absolute;
  width:640px;
  height:640px;
  border:1px solid rgba(129,158,237,.11);
  border-radius:50%;
  right:-180px;
  top:-240px;
  box-shadow:0 0 0 80px rgba(129,158,237,.025),0 0 0 160px rgba(129,158,237,.02)
}
.agent-layout {
  min-height:710px;
  display:grid;
  grid-template-columns:1fr .78fr;
  align-items:center;
  gap:90px;
  padding-top:90px;
  padding-bottom:90px;
  position:relative
}
.section-kicker-light {
  color:#8daaff
}
.section-kicker-light span {
  border-color:rgba(141,170,255,.5)
}
.agent-copy h2,.console-intro h2 {
  font-size:clamp(38px,4.8vw,58px);
  line-height:1.27;
  letter-spacing:-.07em;
  margin-top:28px
}
.agent-copy h2 span {
  color:#8eaaff
}
.agent-lead {
  font-size:13px;
  line-height:1.9;
  color:#a8b2c5;
  max-width:440px;
  margin-top:18px
}
.agent-steps {
  margin-top:35px;
  border-top:1px solid rgba(255,255,255,.14)
}
.agent-step {
  display:flex;
  align-items:center;
  padding:16px 4px;
  border-bottom:1px solid rgba(255,255,255,.12);
  gap:15px
}
.step-no {
  font:10px var(--mono);
  color:#8eaaff
}
.agent-step b,.agent-step small {
  display:block
}
.agent-step b {
  font-size:11px
}
.agent-step small {
  font-size:9px;
  color:#98a4ba;
  margin-top:4px
}
.step-mark {
  margin-left:auto;
  color:#91acff;
  font-size:15px
}
.agent-device-wrap {
  justify-self:center;
  position:relative
}
.device-agent {
  width:250px;
  border-radius:31px;
  position:relative;
  z-index:1;
  transform:rotate(-2deg)
}
.agent-ribbon {
  position:absolute;
  top:43px;
  left:-88px;
  white-space:nowrap;
  z-index:2;
  background:#202b41;
  border:1px solid rgba(255,255,255,.1);
  border-radius:5px;
  padding:12px 15px;
  font:8px var(--mono);
  letter-spacing:.08em;
  color:#c1cee9
}
.agent-ribbon span {
  color:#83d2aa;
  margin:0 8px
}
.agent-proof {
  display:flex;
  align-items:center;
  gap:10px;
  color:#b8c4d7;
  position:absolute;
  bottom:20px;
  left:-50px;
  font-size:9px;
  white-space:nowrap
}
.agent-proof .proof-dot {
  width:6px;
  height:6px
}
.ocr-section {
  padding-top:120px;
  padding-bottom:130px
}
.ocr-heading-row,.architecture-head,.console-intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-top:34px
}
.ocr-heading-row>p,.architecture-head>p {
  max-width:360px;
  color:#778398;
  font-size:13px;
  line-height:1.95;
  padding-bottom:6px
}
.ocr-workbench {
  margin-top:52px;
  background:#111a2c;
  color:#f5f7fd;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 22px 45px rgba(19,37,73,.11)
}
.workbench-top {
  height:53px;
  display:flex;
  align-items:center;
  padding:0 22px;
  border-bottom:1px solid rgba(255,255,255,.09);
  font-size:8px;
  color:#8593ad
}
.window-dots {
  display:flex;
  gap:5px;
  margin-right:22px
}
.window-dots i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#f27777
}
.window-dots i:nth-child(2) {
  background:#e7bd64
}
.window-dots i:nth-child(3) {
  background:#71c9a0
}
.workbench-tag {
  margin-left:auto;
  border:1px solid rgba(136,166,244,.25);
  color:#91aaff;
  padding:6px 9px;
  border-radius:3px
}
.pipeline {
  padding:50px 35px 46px;
  display:grid;
  grid-template-columns:1fr .6fr 1fr .75fr 1fr .55fr 1fr;
  align-items:center;
  gap:12px
}
.pipeline-node {
  min-height:126px;
  background:#18243a;
  border:1px solid #2b3c5c;
  border-radius:7px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px
}
.node-icon {
  font:23px var(--mono);
  color:#a1b8ff
}
.image-icon {
  font-size:30px
}
.structure-icon {
  font-size:20px
}
.result-icon {
  width:28px;
  height:28px;
  border:1px solid #67bd98;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#7de0ae;
  font-size:14px
}
.python-mark {
  font:700 15px var(--mono);
  color:#f0d27a;
  background:#293349;
  border:1px solid rgba(240,210,122,.3);
  width:34px;
  height:34px;
  border-radius:6px;
  display:grid;
  place-items:center
}
.node-label {
  font-size:10px;
  font-weight:700
}
.pipeline-node small {
  font:8px var(--mono);
  color:#8593ad
}
.pipeline-link {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px
}
.pipeline-link span {
  font:7px var(--mono);
  color:#72819b;
  white-space:nowrap
}
.pipeline-link i {
  width:100%;
  height:1px;
  background:#536789;
  position:relative
}
.pipeline-link i:after {
  content:"";
  position:absolute;
  width:6px;
  height:6px;
  border-top:1px solid #a5b8e2;
  border-right:1px solid #a5b8e2;
  right:0;
  top:-3px;
  transform:rotate(45deg)
}
.workbench-bottom {
  min-height:48px;
  border-top:1px solid rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 22px;
  font-size:9px;
  color:#a7b3c6
}
.workbench-bottom>span:first-child {
  display:flex;
  align-items:center;
  gap:9px
}
.live-indicator {
  width:6px;
  height:6px
}
.workbench-bottom em {
  font-style:normal;
  color:#8695ae;
  font-size:8px;
  margin-left:7px
}
.ocr-details {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
  margin-top:40px
}
.ocr-detail {
  padding-top:16px;
  border-top:1px solid var(--line)
}
.detail-no {
  font-size:8px;
  color:var(--blue)
}
.ocr-detail h3 {
  font-size:16px;
  margin-top:16px
}
.ocr-detail p {
  font-size:11px;
  line-height:1.9;
  color:#778398;
  margin-top:9px;
  max-width:300px
}
.architecture-section {
  background:#eef2fa;
  padding:110px 0 105px
}
.architecture-head {
  margin-top:34px;
  align-items:end
}
.architecture-map {
  margin-top:55px;
  display:grid;
  grid-template-columns:1fr 150px 1.2fr;
  grid-template-rows:repeat(2,92px) 45px 85px;
  gap:12px 18px;
  align-items:stretch
}
.arch-client,.arch-python {
  background:#fff;
  border:1px solid #e0e6f0;
  border-radius:7px;
  padding:15px 17px;
  display:flex;
  align-items:center;
  gap:13px
}
.arch-app {
  grid-column:1;
  grid-row:1
}
.arch-web {
  grid-column:1;
  grid-row:2
}
.arch-symbol {
  width:35px;
  height:35px;
  border-radius:8px;
  background:#edf2ff;
  color:var(--blue);
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:14px
}
.arch-client b,.arch-python b {
  display:block;
  font-size:11px
}
.arch-client small,.arch-python small {
  display:block;
  color:#8b96a9;
  font-size:9px;
  margin-top:4px
}
.arch-state {
  font-size:7px;
  color:#61749b;
  border:1px solid #dce4f1;
  border-radius:3px;
  padding:5px 7px;
  margin-left:auto;
  white-space:nowrap
}
.arch-connector {
  grid-column:2;
  grid-row:1/3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#7889a5;
  font:8px var(--mono)
}
.arch-connector i {
  height:34px;
  width:1px;
  background:#a9b9dc;
  position:relative
}
.arch-connector i:first-child:after,.arch-connector i:last-child:after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#6789e5;
  left:-2px;
  bottom:0
}
.arch-server {
  grid-column:3;
  grid-row:1/4;
  background:#172239;
  border-radius:8px;
  color:#f7f9ff;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:15px
}
.server-top {
  font-size:9px;
  color:#dfe7fb;
  display:flex;
  align-items:center;
  gap:9px
}
.server-led {
  background:#72d5a5;
  width:6px;
  height:6px;
  box-shadow:none
}
.server-top small {
  margin-left:auto;
  color:#8d9ab2;
  font-size:8px
}
.server-modules,.server-foot {
  display:flex;
  flex-wrap:wrap;
  gap:7px
}
.server-modules span {
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:4px;
  font-size:8px;
  color:#c3cde0
}
.server-foot {
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.1)
}
.server-foot span {
  font:7px var(--mono);
  color:#91a0ba
}
.connector-python {
  grid-column:2;
  grid-row:3/5
}
.connector-python i {
  height:24px
}
.arch-python {
  grid-column:1/4;
  grid-row:4;
  border-color:#cad7f1
}
.arch-python .python-mark {
  margin-left:14px;
  background:#fff9e7;
  color:#8d6820
}
.stack-line {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:28px
}
.stack-line span {
  font:8px var(--mono);
  padding:9px 11px;
  border:1px solid #dce4f0;
  border-radius:4px;
  color:#78849a
}
.stack-line b {
  color:#30405d;
  font-weight:500
}
.console-section {
  margin-top:100px;
  margin-bottom:110px;
  background:#111a2c;
  border-radius:11px;
  color:#f7f9ff;
  padding:68px 60px 45px;
  position:relative;
  overflow:hidden
}
.console-section:after {
  content:"";
  position:absolute;
  right:-180px;
  top:-240px;
  width:460px;
  height:460px;
  border:1px solid rgba(141,170,255,.1);
  border-radius:50%;
  box-shadow:0 0 0 80px rgba(141,170,255,.025)
}
.console-intro {
  align-items:end;
  margin-top:24px;
  position:relative;
  z-index:1
}
.console-intro h2 {
  font-size:36px;
  margin:0
}
.console-intro p {
  font-size:11px;
  color:#a1acc0;
  line-height:1.9;
  max-width:330px;
  padding-bottom:4px
}
.console-frame {
  position:relative;
  margin-top:35px;
  border-radius:7px;
  background:white;
  padding:6px;
  z-index:1;
  box-shadow:0 22px 50px rgba(0,0,0,.24)
}
.console-image {
  position:relative;
  overflow:hidden;
  border-radius:3px;
  line-height:0
}
.console-image>img {
  width:100%;
  height:auto
}
.redact {
  position:absolute;
  display:grid;
  place-items:center;
  background:#edf1f7;
  color:#77849a;
  font:7px var(--mono);
  letter-spacing:.03em;
  line-height:1;
  padding:4px 5px;
  white-space:nowrap;
  border:1px solid #d8e0ec
}
.redact-instance {
  left:39.7%;
  top:39%;
  width:20.4%;
  height:8.2%
}
.redact-provider {
  left:18.5%;
  top:60%;
  width:25%;
  height:8%
}
.redact-account {
  left:0;
  bottom:4%;
  width:14%;
  height:6%
}
.console-caption {
  height:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 10px;
  color:#818da3;
  font-size:7px
}
.console-caption span:first-child {
  display:flex;
  align-items:center;
  gap:8px
}
.console-led {
  width:6px;
  height:6px;
  box-shadow:none
}
.console-modules {
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:24px;
  position:relative;
  z-index:1
}
.console-modules span {
  font-size:9px;
  color:#c5cede
}
.console-modules i {
  font-style:normal;
  color:#91aaff;
  margin-right:7px
}
.closing-section {
  min-height:465px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding-top:30px;
  padding-bottom:65px
}
.closing-art {
  height:330px;
  position:relative;
  display:grid;
  place-items:center
}
.closing-art img {
  width:160px;
  z-index:1;
  filter:drop-shadow(0 15px 30px rgba(23,81,219,.2));
  animation:logo-breathe 5s ease-in-out infinite
}
.closing-ring {
  position:absolute;
  border:1px solid rgba(36,88,231,.13);
  border-radius:50%
}
.ring-1 {
  width:260px;
  height:260px
}
.ring-2 {
  width:350px;
  height:350px;
  border-color:rgba(36,88,231,.08)
}
.closing-copy {
  padding-left:40px
}
.closing-copy h2 {
  font-size:46px;
  margin-top:23px
}
.closing-copy p {
  font-size:11px;
  color:#748096;
  line-height:1.9;
  margin:17px 0 23px
}
.closing-copy .button {
  padding:12px 16px
}
.site-footer {
  min-height:75px;
  padding:18px max(48px,calc((100% - var(--wrap))/2));
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#8893a5;
  font-size:8px
}
.footer-brand {
  font-size:12px;
  color:var(--ink)
}
.footer-brand img {
  width:20px;
  height:20px
}
.reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.3,1)
}
.reveal-late {
  transition-delay:.12s
}
.reveal-late-2 {
  transition-delay:.22s
}
.reveal.visible {
  opacity:1;
  transform:translateY(0)
}
@keyframes phone-float {
  0%,100% {
    transform:translateY(0) rotate(2deg)
  }
  50% {
    transform:translateY(-11px) rotate(1deg)
  }
}
@keyframes logo-breathe {
  0%,100% {
    transform:scale(1)
  }
  50% {
    transform:scale(1.04)
  }
}
@media(max-width:1000px) {
  :root {
    --wrap:900px
  }
  .section-wrap {
    width:calc(100% - 64px)
  }
  .site-header {
    padding-inline:32px
  }
  .hero {
    min-height:650px;
    grid-template-columns:1.05fr .95fr
  }
  .hero-visual {
    transform:scale(.9)
  }
  h1 {
    font-size:61px
  }
  .intro-grid {
    gap:50px
  }
  .gallery-card {
    padding:20px;
    height:560px
  }
  .gallery-card h3 {
    font-size:21px
  }
  .phone-cut {
    width:145px;
    top:210px
  }
  .gallery-projects .phone-cut,.gallery-time .phone-cut {
    width:150px
  }
  .agent-layout {
    gap:45px
  }
  .console-section {
    padding-inline:38px
  }
  .architecture-map {
    grid-template-columns:1fr 105px 1.15fr
  }
  .pipeline {
    padding-inline:23px;
    gap:8px
  }
  .pipeline-node {
    min-height:115px
  }
}
@media(max-width:700px) {
  html {
    scroll-padding-top:72px
  }
  .section-wrap {
    width:calc(100% - 40px)
  }
  .site-header {
    height:68px;
    padding-inline:20px
  }
  .wordmark img {
    width:24px;
    height:24px
  }
  .wordmark span {
    font-size:16px
  }
  .nav-cta {
    margin-left:auto;
    margin-right:14px;
    font-size:10px;
    padding:10px 12px
  }
  .nav-cta span {
    margin-left:5px
  }
  .menu-toggle {
    order:3;
    width:34px;
    height:34px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    background:transparent;
    border:1px solid var(--line);
    border-radius:50%;
    z-index:22
  }
  .menu-toggle span {
    width:12px;
    height:1px;
    background:var(--ink);
    transition:transform .2s
  }
  .menu-toggle[aria-expanded="true"] span:first-child {
    transform:translateY(3px) rotate(45deg)
  }
  .menu-toggle[aria-expanded="true"] span:last-child {
    transform:translateY(-3px) rotate(-45deg)
  }
  .main-nav {
    display:none;
    position:absolute;
    top:67px;
    left:0;
    right:0;
    padding:12px 20px 18px;
    background:rgba(246,248,252,.98);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    gap:0
  }
  .main-nav.open {
    display:flex
  }
  .main-nav a {
    padding:13px 2px;
    border-bottom:1px solid rgba(18,27,46,.06);
    font-size:12px
  }
  .hero {
    min-height:auto;
    grid-template-columns:1fr;
    padding:70px 0 85px
  }
  .hero-copy {
    padding:0
  }
  .eyebrow {
    font-size:8px;
    margin-bottom:22px
  }
  h1 {
    font-size:clamp(45px,12vw,62px)
  }
  .hero-lead {
    font-size:13px;
    line-height:1.85;
    max-width:360px;
    margin-top:18px
  }
  .hero-actions {
    gap:18px;
    margin-top:24px
  }
  .button {
    padding:13px 15px;
    gap:20px;
    font-size:10px
  }
  .text-link {
    font-size:10px
  }
  .hero-facts {
    gap:12px;
    margin-top:27px;
    padding-top:14px;
    font-size:8px
  }
  .hero-facts i {
    margin-right:3px
  }
  .hero-visual {
    height:430px;
    transform:none;
    margin-top:15px
  }
  .orbit-one {
    width:350px;
    height:255px
  }
  .orbit-two {
    width:280px;
    height:360px
  }
  .device-hero {
    width:205px
  }
  .float-note {
    right:0;
    bottom:25px;
    padding:11px 13px
  }
  .label-a {
    top:40px;
    right:0
  }
  .label-b {
    bottom:60px;
    left:2px
  }
  .scroll-cue {
    bottom:22px;
    font-size:8px
  }
  .intro {
    padding-top:68px;
    padding-bottom:80px
  }
  .intro-grid {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:22px
  }
  .intro h2,.architecture-head h2,.ocr-heading h2,.closing-copy h2 {
    font-size:42px
  }
  .intro-copy {
    font-size:12px
  }
  .app-gallery {
    grid-template-columns:1fr;
    gap:12px;
    margin-top:30px
  }
  .gallery-card {
    height:550px;
    padding:20px
  }
  .gallery-card h3 {
    margin-top:21px;
    font-size:23px
  }
  .gallery-card p {
    max-width:210px
  }
  .phone-cut {
    width:157px;
    top:195px;
    left:68%
  }
  .gallery-projects .phone-cut {
    width:158px;
    top:190px;
    left:68%
  }
  .gallery-time .phone-cut {
    width:160px;
    top:190px;
    left:68%
  }
  .evidence-caption {
    text-align:left;
    font-size:8px;
    line-height:1.6
  }
  .agent-layout {
    grid-template-columns:1fr;
    gap:35px;
    padding-top:70px;
    padding-bottom:68px
  }
  .agent-copy h2,.console-intro h2 {
    font-size:39px
  }
  .agent-lead {
    font-size:12px
  }
  .agent-step {
    padding:14px 4px
  }
  .agent-device-wrap {
    margin:0 auto;
    width:270px
  }
  .device-agent {
    width:210px;
    margin:0 auto
  }
  .agent-ribbon {
    top:40px;
    left:-24px;
    font-size:7px
  }
  .agent-proof {
    bottom:16px;
    left:-5px
  }
  .ocr-section {
    padding-top:78px;
    padding-bottom:80px
  }
  .ocr-heading-row,.architecture-head,.console-intro {
    display:block;
    margin-top:23px
  }
  .ocr-heading-row>p,.architecture-head>p {
    margin-top:17px;
    font-size:12px
  }
  .ocr-workbench {
    margin-top:29px
  }
  .workbench-top {
    height:45px;
    padding-inline:12px;
    font-size:7px
  }
  .window-dots {
    margin-right:10px
  }
  .workbench-tag {
    font-size:6px;
    padding:5px
  }
  .pipeline {
    padding:25px 14px;
    grid-template-columns:1fr 28px 1fr;
    gap:13px 6px
  }
  .pipeline-node {
    min-height:100px
  }
  .pipeline-link {
    gap:5px
  }
  .pipeline-link span {
    font-size:6px;
    white-space:normal;
    text-align:center
  }
  .pipeline-link i {
    width:23px
  }
  .pipeline-link:nth-child(4) {
    grid-column:2;
    grid-row:2
  }
  .pipeline-node:nth-child(5) {
    grid-column:3;
    grid-row:2
  }
  .pipeline-link:nth-child(6) {
    grid-column:2;
    grid-row:3
  }
  .pipeline-node:nth-child(7) {
    grid-column:3;
    grid-row:3
  }
  .workbench-bottom {
    padding:11px 12px;
    gap:10px;
    align-items:flex-start;
    font-size:7px;
    line-height:1.6
  }
  .workbench-bottom>span:last-child {
    text-align:right
  }
  .ocr-details {
    grid-template-columns:1fr;
    gap:18px;
    margin-top:28px
  }
  .ocr-detail {
    padding-top:12px
  }
  .ocr-detail h3 {
    font-size:14px;
    margin-top:9px
  }
  .ocr-detail p {
    max-width:none;
    font-size:10px;
    margin-top:6px
  }
  .architecture-section {
    padding:75px 0 68px
  }
  .architecture-head {
    display:block
  }
  .architecture-map {
    margin-top:32px;
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:9px
  }
  .arch-app,.arch-web,.arch-server,.connector-python,.arch-python {
    grid-column:1;
    grid-row:auto
  }
  .arch-client {
    min-height:72px
  }
  .arch-connector {
    grid-column:1;
    grid-row:auto;
    height:42px;
    flex-direction:row;
    gap:10px
  }
  .arch-connector i {
    height:1px;
    width:34px
  }
  .arch-connector i:first-child:after,.arch-connector i:last-child:after {
    left:auto;
    right:0;
    bottom:-2px
  }
  .arch-server {
    min-height:160px
  }
  .connector-python {
    height:34px
  }
  .connector-python i {
    width:1px;
    height:22px
  }
  .arch-python {
    min-height:75px
  }
  .arch-python .arch-state {
    font-size:6px
  }
  .stack-line {
    gap:7px;
    margin-top:16px
  }
  .stack-line span {
    font-size:7px;
    padding:8px
  }
  .console-section {
    width:calc(100% - 24px);
    margin-top:58px;
    margin-bottom:58px;
    padding:34px 15px 24px;
    border-radius:8px
  }
  .console-intro {
    display:block
  }
  .console-intro h2 {
    font-size:29px;
    line-height:1.45;
    margin-top:0
  }
  .console-intro p {
    font-size:10px;
    margin-top:13px
  }
  .console-frame {
    margin-top:23px;
    padding:3px
  }
  .console-image {
    overflow:hidden;
    min-height:120px
  }
  .console-image>img {
    width:145%;
    max-width:none;
    transform:translateX(-22%)
  }
  .redact {
    font-size:5px;
    padding:3px
  }
  .redact-instance {
    left:36%;
    top:39%;
    width:27%;
    height:9%
  }
  .redact-provider {
    left:13.5%;
    top:60%;
    width:34%;
    height:9%
  }
  .redact-account {
    width:20%
  }
  .console-caption {
    height:auto;
    min-height:34px;
    padding:5px 5px;
    gap:6px;
    font-size:6px;
    line-height:1.4
  }
  .console-caption span:last-child {
    text-align:right
  }
  .console-modules {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:13px 6px;
    margin-top:18px
  }
  .console-modules span {
    font-size:8px
  }
  .closing-section {
    min-height:auto;
    grid-template-columns:1fr;
    padding-top:14px;
    padding-bottom:48px
  }
  .closing-art {
    height:250px;
    grid-row:2
  }
  .closing-art img {
    width:125px
  }
  .ring-1 {
    width:210px;
    height:210px
  }
  .ring-2 {
    width:280px;
    height:280px
  }
  .closing-copy {
    padding:10px 0 0
  }
  .closing-copy h2 {
    font-size:42px
  }
  .closing-copy p {
    font-size:10px
  }
  .site-footer {
    padding:19px 20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    font-size:7px
  }
  .site-footer>:nth-child(even) {
    text-align:right
  }
  .footer-brand {
    font-size:11px
  }
  .footer-brand img {
    width:18px;
    height:18px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  .reveal {
    opacity:1;
    transform:none
  }
}
.hero-visual {
  overflow:clip
}



/* GSAP-driven motion styling */
:root { --motion-ease: cubic-bezier(.16, 1, .3, 1); }
.scroll-progress {
  position: fixed; z-index: 100; inset: 0 auto auto 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, #2458e7, #56a6ff 55%, #8b7cff);
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 14px rgba(36, 88, 231, .4); pointer-events: none;
}
.hero { isolation: isolate; }
.hero:before {
  content: ""; position: absolute; z-index: -1; width: min(68vw, 820px); aspect-ratio: 1;
  right: 0; top: -14%; border-radius: 50%;
  background: radial-gradient(circle at 48% 45%, rgba(81, 132, 255, .14), rgba(108, 172, 255, .055) 33%, transparent 68%);
  filter: blur(12px); transform: scale(var(--hero-glow, 1)); pointer-events: none;
}
.device-hero { animation: none; transform-style: preserve-3d; will-change: transform; }
.reveal { transition: none; }
.reveal.visible { opacity: 1; transform: none; }
.gallery-card { transform-style: preserve-3d; transition: box-shadow .45s ease, border-color .3s ease; }
.gallery-card:hover { border-color: rgba(36, 88, 231, .3); box-shadow: 0 24px 50px rgba(33, 50, 88, .12); }
.agent-step { transition: background .25s ease, border-color .25s ease; }
.agent-step:hover { background: rgba(255,255,255,.055); border-color: rgba(141,170,255,.32); }
.pipeline-link i { transform-origin: left center; }
.flow-packet {
  position: absolute; z-index: 2; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: #b7caff; box-shadow: 0 0 14px rgba(156,184,255,.95); pointer-events: none;
}
.console-frame { transform-origin: center top; }
.console-image img { transition: transform .8s var(--motion-ease); }
.console-frame:hover .console-image img { transform: scale(1.018); }
.button-dark span { transition: transform .25s var(--motion-ease); }
.button-dark:hover span { transform: translateY(3px); }
@media (max-width: 700px) {
  .hero:before { width: 115vw; right: 0; top: 0; }
  .device-hero { will-change: auto; }
  .gallery-card:hover { transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-progress { display: none; }
  .hero:before { transform: none; }
  .device-hero { animation: none !important; will-change: auto; }
  .reveal { opacity: 1; visibility: visible; transform: none !important; }
  .pipeline-node { opacity: 1; transform: none; }
  .flow-packet { display: none; }
}
.no-gsap .reveal { opacity: 1; visibility: visible; transform: none; }

.hero-visual { overflow-x: clip; overflow-y: visible; }

/* A more editorial product story: a floating header, a full-bleed opening,
   and a pinned desktop gallery that becomes a normal stack on smaller screens. */
.site-header {
  width: min(var(--wrap), calc(100% - 48px));
  height: 68px;
  margin: 14px auto -82px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(248,250,255,.82);
  box-shadow: 0 12px 36px rgba(8,18,48,.12);
}
.hero {
  width: 100%;
  max-width: none;
  min-height: 790px;
  margin: 0;
  padding: 150px max(48px, calc((100% - var(--wrap))/2)) 100px;
  overflow: hidden;
  color: #f7f9ff;
  background:
    radial-gradient(ellipse at 78% 42%, rgba(58,113,255,.32), transparent 38%),
    radial-gradient(ellipse at 6% 100%, rgba(95,68,214,.28), transparent 42%),
    linear-gradient(119deg, #101a36 0%, #10264b 52%, #182a5d 100%);
}
.hero:before {
  width: min(74vw, 980px);
  right: -6%;
  top: 4%;
  background: radial-gradient(circle at 48% 45%, rgba(89,157,255,.25), rgba(113,128,255,.1) 35%, transparent 69%);
}
.hero:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .19;
  pointer-events: none;
  background-image: radial-gradient(rgba(225,235,255,.72) .7px, transparent .7px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent 22%, #000 100%);
}
.hero .eyebrow { color: #b9c9eb; }
.hero h1 { color: #fff; }
.hero .ink-blue {
  color: #91b5ff;
  background: linear-gradient(95deg, #a8c8ff, #7fd9f7 70%, #c2b5ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead { color: #c0cbe0; }
.hero .button-dark { color: #14203b; background: #f7f9ff; }
.hero .button-dark:hover { background: #dce9ff; }
.hero .text-link { color: #e1e9f8; }
.hero .text-link span { color: #8bcfff; }
.hero-facts { border-color: rgba(221,232,255,.2); color: #c2cce0; }
.hero-facts i { color: #8fc7ff; }
.orbit { border-color: rgba(178,206,255,.2); }
.orbit-two { border-color: rgba(178,206,255,.12); }
.orbit-label { color: #d5e3ff; background: rgba(22,39,77,.78); }
.hero .float-note { border-color: rgba(255,255,255,.25); background: rgba(247,250,255,.95); }
.hero .scroll-cue { color: #becdec; }
.gallery-viewport { height: 665px; margin-top: 55px; overflow: hidden; position: relative; }
.app-gallery { display: flex; width: max-content; gap: 24px; margin-top: 0; }
.gallery-card { flex: 0 0 min(68vw, 820px); width: min(68vw, 820px); height: 620px; border-radius: 16px; }
.gallery-card h3 { font-size: 30px; margin-top: 38px; }
.gallery-card p { font-size: 12px; max-width: 275px; }
.gallery-inbox { background: linear-gradient(135deg,#edf3ff,#e7edfa); }
.gallery-projects { background: linear-gradient(135deg,#f3f4f8,#e8edf6); }
.gallery-time { background: linear-gradient(135deg,#e9f3fb,#e5eaff); }
.phone-cut,
.gallery-projects .phone-cut,
.gallery-time .phone-cut {
  width: 220px;
  top: 124px;
  left: 72%;
  transform: translateX(-50%);
  border-radius: 23px 23px 0 0;
}
.gallery-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  color: #74819a;
  font: 9px var(--mono);
  letter-spacing: .05em;
}
.gallery-progress i { display: block; width: 180px; height: 2px; overflow: hidden; background: #dce3ef; }
.gallery-progress b { display: block; width: 100%; height: 100%; background: linear-gradient(90deg,#2458e7,#7f8fff); transform: scaleX(0); transform-origin: left; }
.gallery-progress small { margin-left: 8px; font-size: 8px; letter-spacing: .12em; }
.evidence-caption { margin-top: 13px; }
.ocr-section { position: relative; isolation: isolate; }
.ocr-section:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 220px;
  width: 100vw;
  height: 450px;
  transform: translateX(-50%);
  clip-path: polygon(0 9%,100% 0,100% 91%,0 100%);
  background: linear-gradient(112deg,#e3edff 0%,#eff6ff 48%,#eeeaff 100%);
}
@media (max-width: 1000px) {
  .site-header { width: calc(100% - 40px); margin: 10px auto -78px; }
  .hero { min-height: 650px; padding: 132px 32px 82px; }
  .gallery-viewport { height: auto; margin-top: 30px; overflow: visible; position: static; }
  .app-gallery { display: grid; width: auto; grid-template-columns: 1fr; gap: 12px; margin-top: 0; }
  .gallery-card { width: auto; height: 560px; flex: none; border-radius: 12px; }
  .gallery-card h3 { font-size: 23px; margin-top: 21px; }
  .gallery-card p { font-size: 10px; }
  .phone-cut,.gallery-projects .phone-cut,.gallery-time .phone-cut { width: 150px; top: 190px; left: 68%; }
  .gallery-progress { display: none; }
}
@media (max-width: 700px) {
  .site-header { width: calc(100% - 24px); height: 60px; margin: 8px auto -68px; padding-inline: 14px; }
  .hero { padding: 108px 20px 78px; }
  .hero:after { opacity: .12; background-size: 20px 20px; }
  .hero-visual { overflow: visible; }
  .hero .float-note { background: rgba(247,250,255,.97); }
  .gallery-viewport { margin-top: 30px; }
  .gallery-card { height: 550px; }
  .phone-cut,.gallery-projects .phone-cut,.gallery-time .phone-cut { width: 157px; top: 190px; left: 68%; }
  .ocr-section:before { top: 160px; height: 390px; clip-path: polygon(0 5%,100% 0,100% 95%,0 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery-progress b { transform: none; }
}
.no-gsap .gallery-viewport,
.motion-static .gallery-viewport { height: auto; overflow: visible; position: static; }
.no-gsap .app-gallery,
.motion-static .app-gallery { display: grid; width: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.no-gsap .gallery-card,
.motion-static .gallery-card { width: auto; flex: none; }
@media (max-width: 1000px) {
  .no-gsap .app-gallery,
  .motion-static .app-gallery { grid-template-columns: 1fr; }
}

/* Scroll World inspired Agent chapter: a real product screen held inside an
   animated orbital stage. The scene only pins on wide desktop screens. */
.agent-section {
  min-height: 100svh;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 78% 48%, rgba(39, 91, 194, .2), transparent 37%),
    radial-gradient(ellipse at 13% 96%, rgba(54, 77, 152, .17), transparent 39%),
    linear-gradient(115deg, #0b1425 0%, #111d34 52%, #10182c 100%);
}
.agent-section::before {
  width: 760px;
  height: 760px;
  right: -215px;
  top: 50%;
  transform: translateY(-50%);
  border-color: rgba(144, 180, 255, .13);
  box-shadow: 0 0 0 90px rgba(117, 158, 242, .035), 0 0 0 180px rgba(117, 158, 242, .025);
}
.agent-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(rgba(207, 223, 255, .55) .65px, transparent .75px);
  background-size: 27px 27px;
  mask-image: linear-gradient(90deg, #000, transparent 82%);
}
.agent-layout {
  min-height: 100svh;
  padding-top: clamp(72px, 10vh, 112px);
  padding-bottom: clamp(56px, 8vh, 90px);
}
.agent-copy { position: relative; z-index: 2; }
.agent-copy h2 { text-wrap: balance; }
.agent-steps { position: relative; }
.agent-steps::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: linear-gradient(180deg, rgba(132, 168, 255, .62), rgba(132, 168, 255, .06));
}
.agent-step {
  position: relative;
  min-height: 67px;
  padding: 13px 8px 13px 0;
  border-color: rgba(191, 208, 242, .14);
  background: transparent;
  transition: background .35s ease, border-color .35s ease;
}
.step-no {
  position: relative;
  z-index: 1;
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  place-items: center;
  border: 1px solid rgba(145, 174, 239, .48);
  border-radius: 50%;
  background: #111d34;
  transition: color .35s ease, background .35s ease, box-shadow .35s ease;
}
.agent-step.is-active { background: linear-gradient(90deg, rgba(107, 147, 230, .13), transparent 90%); }
.agent-step.is-active .step-no {
  color: #081326;
  border-color: #a8ceff;
  background: #9fc9ff;
  box-shadow: 0 0 20px rgba(106, 162, 255, .42);
}
.agent-step.is-active b { color: #fff; }
.agent-device-wrap {
  width: min(100%, 430px);
  min-height: 560px;
  display: grid;
  place-items: center;
  perspective: 1200px;
}
.device-agent {
  width: 250px;
  box-shadow: 0 34px 92px rgba(0, 0, 0, .42), 0 0 0 1px rgba(205, 221, 255, .14);
  transform: rotate(-3deg) translateZ(24px);
  transition: box-shadow .5s ease;
}
.agent-device-wrap::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 230px;
  height: 54px;
  bottom: 70px;
  border-radius: 50%;
  background: rgba(57, 101, 196, .36);
  filter: blur(28px);
  transform: translateY(10px);
}
.agent-portal {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(37vw, 490px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.portal-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(142, 178, 255, .2);
  border-radius: 50%;
  box-shadow: inset 0 0 42px rgba(84, 128, 222, .045), 0 0 42px rgba(79, 125, 224, .055);
}
.portal-ring-outer { inset: 3%; border-style: dashed; border-color: rgba(157, 183, 235, .14); }
.portal-ring-middle { inset: 14%; border-color: rgba(142, 178, 255, .3); }
.portal-ring-inner { inset: 26%; border-color: rgba(142, 178, 255, .14); }
.portal-ring-outer::before,.portal-ring-middle::before {
  content: "";
  position: absolute;
  top: 14%;
  left: 20%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9cc9ff;
  box-shadow: 0 0 16px 4px rgba(110, 168, 255, .58);
}
.portal-ring-middle::before { top: auto; bottom: 13%; left: 74%; width: 4px; height: 4px; }
.portal-node {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 7px;
  border: 1px solid #d4e4ff;
  border-radius: 50%;
  background: #5da8ff;
  box-shadow: 0 0 18px 5px rgba(74, 142, 255, .38);
}
.portal-node-one { top: 7%; right: 24%; }
.portal-node-two { bottom: 15%; left: 10%; width: 5px; height: 5px; }
.portal-crosshair {
  position: absolute;
  right: 5%;
  bottom: 29%;
  color: rgba(171, 195, 240, .56);
  font: 8px var(--mono);
  letter-spacing: .18em;
}
.agent-ribbon { backdrop-filter: blur(12px); box-shadow: 0 12px 38px rgba(0, 0, 0, .18); }
.agent-proof { z-index: 2; }
@media (min-width: 1001px) {
  .agent-section { min-height: 100svh; }
  .agent-layout { grid-template-columns: 1fr .9fr; gap: 8vw; }
}
@media (max-width: 1000px) {
  .agent-section { min-height: auto; }
  .agent-layout { min-height: auto; }
  .agent-device-wrap { min-height: 510px; }
  .agent-portal { width: min(70vw, 420px); }
}
@media (max-width: 700px) {
  .agent-section::before { width: 560px; height: 560px; right: -360px; top: 72%; }
  .agent-layout { gap: 22px; }
  .agent-device-wrap { min-height: 445px; width: min(100%, 340px); }
  .agent-portal { width: min(88vw, 355px); }
  .device-agent { width: 210px; }
  .agent-device-wrap::after { bottom: 38px; width: 180px; }
  .agent-proof { bottom: 9px; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .agent-step,.step-no,.device-agent { transition: none; }
  .portal-ring { transform: none !important; }
}

/* ActionOS product editorial redesign: a paper-toned opening, distinct product
   chapters, and a full-bleed engineering workbench. */
:root {
  --paper: #eef1f0;
  --ink: #111a2b;
  --muted: #6d7787;
  --line: #d8dee2;
  --blue: #2458e7;
  background: var(--paper);
}
body { background: var(--paper); color: var(--ink); }
.site-header {
  background: rgba(248, 249, 247, .92);
  border-color: rgba(18, 31, 51, .1);
  box-shadow: 0 9px 32px rgba(26, 40, 59, .09);
}
.main-nav a { color: #526075; }
.nav-cta { background: #f7f8f6; border-color: #d5dce0; color: #17243a; }
.hero {
  min-height: min(900px, 100svh);
  color: var(--ink);
  background:
    radial-gradient(ellipse at 91% 41%, rgba(62, 114, 220, .12), transparent 32%),
    linear-gradient(135deg, #f0f2ed 0%, #e7ecef 56%, #e4eaf0 100%);
}
.hero::before {
  right: -8%;
  top: 4%;
  width: min(74vw, 980px);
  background: radial-gradient(circle at 50% 50%, rgba(89, 141, 235, .22), rgba(103, 155, 215, .06) 38%, transparent 70%);
}
.hero::after {
  opacity: .28;
  background-image:
    linear-gradient(rgba(49, 73, 104, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(49, 73, 104, .08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent 8%, #000 62%, transparent 100%);
}
.hero .eyebrow { color: #44566e; }
.hero h1 { color: #101a2c; font-size: clamp(58px, 7vw, 92px); line-height: 1.04; letter-spacing: -.09em; }
.hero .ink-blue {
  color: #2358e8;
  background: linear-gradient(100deg, #2458e7 4%, #347bdf 70%, #15a5b8 112%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-lead { max-width: 415px; color: #59687a; font-size: 14px; }
.hero .button-dark { color: #fff; background: #132139; }
.hero .button-dark:hover { background: #2458e7; }
.hero .text-link { color: #344860; }
.hero-facts { border-color: rgba(33, 51, 78, .16); color: #697789; }
.hero-facts i { color: #2458e7; }
.hero-visual { isolation: isolate; }
.hero-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 46px 4px 42px 40px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 230px 22px 22px 22px;
  background: linear-gradient(145deg, rgba(44, 93, 189, .94), rgba(19, 41, 84, .98));
  box-shadow: 0 34px 80px rgba(39, 68, 111, .2), inset 0 1px rgba(255, 255, 255, .16);
}
.hero-visual::after {
  content: "ACTIONOS / TODAY";
  position: absolute;
  z-index: 1;
  left: 64px;
  top: 70px;
  color: rgba(231, 240, 255, .62);
  font: 8px var(--mono);
  letter-spacing: .18em;
}
.hero .orbit-one { z-index: 1; width: 500px; height: 390px; border-color: rgba(222, 234, 255, .2); }
.hero .orbit-two { z-index: 1; width: 390px; height: 465px; border-color: rgba(222, 234, 255, .12); }
.hero .device-hero { z-index: 2; width: 276px; border: 7px solid #fbfcfb; border-radius: 36px; box-shadow: 0 28px 72px rgba(7, 18, 40, .34), 0 0 0 1px rgba(16, 35, 68, .1); }
.hero .orbit-label { z-index: 3; background: #173668; color: #dbeaff; }
.hero .float-note { z-index: 4; color: #f5f8ff; background: rgba(15, 29, 52, .94); border-color: rgba(255, 255, 255, .18); box-shadow: 0 15px 38px rgba(8, 19, 43, .24); }
.hero .float-note small { color: #b3c2dc; }
.hero .scroll-cue { color: #586a80; }

.intro {
  padding-top: 128px;
  padding-bottom: 94px;
}
.intro .section-kicker { color: #5a6c7e; }
.intro .section-kicker span { color: #2458e7; border-color: #8ea6cf; }
.intro-grid { grid-template-columns: 1.15fr .65fr; gap: 8vw; margin-top: 40px; }
.intro h2 { max-width: 760px; font-size: clamp(54px, 7vw, 86px); line-height: 1.05; letter-spacing: -.095em; }
.intro h2 .muted { color: #9aa5ae; }
.intro-copy { max-width: 360px; color: #586779; font-size: 13px; line-height: 2; }
.gallery-viewport { height: 755px; margin-top: 64px; }
.app-gallery { gap: 26px; }
.gallery-card {
  height: 704px;
  padding: 30px 34px;
  border: 0;
  border-radius: 20px;
  box-shadow: inset 0 1px rgba(255,255,255,.75), 0 24px 54px rgba(32,50,75,.1);
}
.gallery-card::before {
  position: absolute;
  z-index: 0;
  left: 20px;
  bottom: -62px;
  color: rgba(33, 61, 105, .065);
  font-size: clamp(180px, 20vw, 275px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.12em;
  pointer-events: none;
}
.gallery-inbox::before { content: "01"; }
.gallery-projects::before { content: "02"; color: rgba(205, 222, 252, .055); }
.gallery-time::before { content: "03"; color: rgba(25, 61, 91, .07); }
.gallery-inbox { color: #142238; background: linear-gradient(140deg, #dce6f0 0%, #edf0ed 72%); }
.gallery-projects { color: #f3f6fb; background: linear-gradient(145deg, #1a2941, #253b5c 72%, #304f7b); }
.gallery-time { color: #11233a; background: linear-gradient(140deg, #d5e7e5 0%, #eaf0e9 72%); }
.gallery-heading,.gallery-card h3,.gallery-card p { position: relative; z-index: 1; }
.gallery-heading { color: #5c6b7d; }
.gallery-projects .gallery-heading { color: #bccce4; }
.gallery-card h3 { margin-top: 48px; max-width: 54%; font-size: clamp(29px, 3.2vw, 42px); line-height: 1.25; letter-spacing: -.075em; }
.gallery-card p { max-width: 48%; margin-top: 15px; color: #5e6e80; font-size: 12px; line-height: 1.8; }
.gallery-projects p { color: #c1cce0; }
.phone-cut,.gallery-projects .phone-cut,.gallery-time .phone-cut {
  z-index: 2;
  top: 165px;
  left: 73%;
  width: 245px;
  border: 7px solid #fbfcfc;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 34px 68px rgba(12, 25, 47, .24), 0 0 0 1px rgba(14, 28, 49, .08);
}
.gallery-progress { bottom: 0; color: #607084; }
.gallery-progress i { width: 220px; background: #cbd3d7; }
.gallery-progress b { background: linear-gradient(90deg, #2458e7, #1cb0bd); }
.evidence-caption { color: #6e7b89; }

.agent-section { background: #101b2e; }
.agent-section::before { border-color: rgba(150, 184, 246, .16); }
.agent-section .agent-copy h2 { font-size: clamp(46px, 5.6vw, 70px); }
.agent-section .agent-lead { max-width: 430px; font-size: 14px; }
.agent-device-wrap { min-height: 650px; }

.ocr-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 122px max(48px, calc((100% - var(--wrap))/2)) 132px;
  color: #111a2b;
  background: #e7ecea;
  isolation: isolate;
}
.ocr-section::before {
  inset: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: none;
  clip-path: none;
  background:
    radial-gradient(ellipse at 88% 4%, rgba(68, 123, 208, .16), transparent 34%),
    linear-gradient(135deg, rgba(214, 225, 225, .45), transparent 52%);
}
.ocr-section .section-kicker { color: #536b84; }
.ocr-section .section-kicker span { border-color: #91a8c1; }
.ocr-heading-row { align-items: end; }
.ocr-heading h2 { color: #111a2b; font-size: clamp(58px, 7vw, 88px); line-height: 1.04; }
.ocr-heading h2 .muted { color: #99a6ad; }
.ocr-heading-row > p { max-width: 400px; color: #526477; font-size: 13px; }
.ocr-workbench { margin-top: 58px; border: 1px solid rgba(177, 199, 236, .18); border-radius: 18px; background: #0c1728; box-shadow: 0 30px 70px rgba(0, 0, 0, .19); }
.workbench-top { height: 62px; color: #aab8d0; }
.workbench-tag { color: #9dbaff; }
.pipeline { padding-block: 58px; }
.pipeline-node { min-height: 145px; border-color: #33445f; background: linear-gradient(145deg, #1b2a42, #152238); }
.pipeline-link i { background: #617ba6; }
.ocr-details { gap: 54px; margin-top: 52px; }
.ocr-detail { padding-top: 20px; border-color: rgba(209, 223, 246, .2); }
.ocr-detail .detail-no { color: #8facf1; }
.ocr-detail h3 { color: #f0f4fa; font-size: 17px; }
.ocr-detail p { max-width: 330px; color: #adbacd; font-size: 12px; }

.architecture-section { background: #e3e9ea; padding: 124px 0 116px; }
.architecture-section .section-kicker { color: #596b7b; }
.architecture-head { margin-top: 40px; }
.architecture-head h2 { font-size: clamp(54px, 7vw, 84px); line-height: 1.05; }
.architecture-head h2 .muted { color: #9da9ac; }
.architecture-head > p { color: #536578; }
.architecture-map { margin-top: 66px; gap: 14px 22px; }
.arch-client,.arch-python { border: 0; border-radius: 12px; box-shadow: 0 12px 28px rgba(39, 58, 77, .07); }
.arch-server { border-radius: 14px; background: #15233a; box-shadow: 0 22px 45px rgba(18, 34, 58, .17); }
.stack-line { margin-top: 34px; }
.stack-line span { padding: 11px 14px; border-color: #cbd5d8; color: #586b7c; }
.stack-line b { color: #162941; }

.console-section {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 118px max(48px, calc((100% - var(--wrap))/2)) 126px;
  display: block;
  background: #f7f8f5;
}
.console-section .section-kicker { color: #596b7b; }
.console-section .section-kicker span { color: #2458e7; border-color: #9bafd0; }
.console-intro { margin-top: 38px; }
.console-intro h2 { color: #121c30; font-size: clamp(48px, 5.9vw, 70px); line-height: 1.18; }
.console-intro p { max-width: 390px; color: #687587; font-size: 13px; }
.console-frame { margin-top: 50px; padding: 14px 14px 0; border: 1px solid #dce1e2; border-radius: 18px; background: #fff; box-shadow: 0 35px 75px rgba(24, 43, 65, .13); }
.console-image { border-radius: 8px 8px 0 0; }
.console-caption { min-height: 48px; color: #647286; }
.console-modules { margin-top: 27px; }
.console-modules span { color: #53647a; font-size: 10px; }
.console-modules i { color: #2458e7; }

.closing-section {
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 560px;
  padding: 74px max(48px, calc((100% - var(--wrap))/2)) 84px;
  color: #f3f6fb;
  background:
    radial-gradient(ellipse at 14% 100%, rgba(24, 134, 190, .26), transparent 40%),
    linear-gradient(115deg, #142745, #1c3c78 74%, #1c4987);
  overflow: hidden;
}
.closing-copy { padding-left: 28px; }
.closing-copy .section-kicker { color: #b5c6e2; }
.closing-copy .section-kicker span { border-color: rgba(181, 198, 226, .5); }
.closing-copy h2 { color: #f5f7fb; font-size: clamp(50px, 6.4vw, 76px); line-height: 1.05; }
.closing-copy h2 .ink-blue { color: #8bc7ff; }
.closing-copy p { color: #c3cfe0; font-size: 12px; }
.closing-copy .button { color: #14233c; background: #eef3fa; }
.closing-copy .button:hover { background: #cde4ff; }
.closing-ring { border-color: rgba(196, 218, 255, .22); }
.ring-2 { border-color: rgba(196, 218, 255, .12); }
.closing-art img { filter: drop-shadow(0 24px 50px rgba(0, 0, 0, .28)); }
.site-footer { border-color: rgba(224, 233, 248, .16); color: #a9b7cc; background: #101b2e; }
.footer-brand { color: #f0f4fb; }

@media (max-width: 1000px) {
  .hero { min-height: 760px; padding-top: 132px; padding-bottom: 82px; }
  .hero h1 { font-size: clamp(55px, 8vw, 74px); }
  .hero-visual::before { inset: 55px -8px 48px 20px; }
  .hero .device-hero { width: 238px; }
  .gallery-viewport { height: auto; margin-top: 46px; }
  .app-gallery { gap: 20px; }
  .gallery-card { height: 590px; padding: 26px; }
  .gallery-card h3 { font-size: 30px; }
  .phone-cut,.gallery-projects .phone-cut,.gallery-time .phone-cut { top: 160px; left: 73%; width: 210px; }
  .agent-device-wrap { min-height: 510px; }
  .ocr-section { padding: 94px 32px 102px; }
  .architecture-section { padding-block: 94px; }
  .console-section { padding: 94px 32px 102px; }
  .closing-section { padding: 64px 32px 74px; }
}
@media (max-width: 700px) {
  .site-header { background: rgba(248, 249, 247, .96); }
  .main-nav { background: rgba(248, 249, 247, .98); }
  .hero { min-height: auto; padding: 112px 20px 76px; }
  .hero h1 { font-size: clamp(48px, 12vw, 62px); }
  .hero-lead { max-width: 345px; }
  .hero-visual { height: 420px; margin: 30px 0 0; }
  .hero-visual::before { inset: 32px 0 30px 16px; border-radius: 140px 18px 18px 18px; }
  .hero-visual::after { left: 35px; top: 52px; font-size: 7px; }
  .hero .device-hero { width: 205px; border-width: 6px; }
  .hero .orbit-one { width: 340px; height: 270px; }
  .hero .orbit-two { width: 280px; height: 360px; }
  .hero .float-note { right: -2px; bottom: 34px; }
  .hero .label-a { top: 40px; right: 2px; }
  .hero .label-b { bottom: 48px; left: 4px; }
  .intro { padding-top: 82px; padding-bottom: 68px; }
  .intro-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 27px; }
  .intro h2 { font-size: clamp(44px, 11vw, 58px); }
  .intro-copy { max-width: 350px; font-size: 12px; }
  .gallery-viewport { margin-top: 32px; }
  .app-gallery { gap: 14px; }
  .gallery-card { height: 548px; padding: 22px; border-radius: 15px; }
  .gallery-card::before { left: 12px; bottom: -20px; font-size: 180px; }
  .gallery-card h3 { max-width: 54%; margin-top: 34px; font-size: 26px; }
  .gallery-card p { max-width: 50%; font-size: 10px; }
  .phone-cut,.gallery-projects .phone-cut,.gallery-time .phone-cut { top: 155px; left: 70%; width: 158px; border-width: 5px; border-radius: 20px 20px 0 0; }
  .agent-section .agent-copy h2 { font-size: 39px; }
  .agent-device-wrap { min-height: 445px; }
  .ocr-section { padding: 80px 20px 86px; }
  .ocr-heading h2 { font-size: 52px; }
  .ocr-workbench { margin-top: 32px; border-radius: 13px; }
  .workbench-top { height: 46px; }
  .pipeline { padding: 27px 13px; }
  .pipeline-node { min-height: 100px; }
  .ocr-details { gap: 18px; margin-top: 30px; }
  .architecture-section { padding: 78px 0 72px; }
  .architecture-head h2 { font-size: 52px; }
  .architecture-map { margin-top: 34px; }
  .console-section { padding: 78px 20px 82px; }
  .console-intro { margin-top: 26px; }
  .console-intro h2 { font-size: 34px; }
  .console-frame { margin-top: 28px; padding: 7px 7px 0; border-radius: 13px; }
  .console-modules { grid-template-columns: 1fr 1fr; display: grid; gap: 13px 6px; }
  .closing-section { min-height: 0; grid-template-columns: 1fr; padding: 70px 20px 66px; }
  .closing-copy { padding: 0; }
  .closing-copy h2 { font-size: 49px; }
  .closing-art { grid-row: auto; height: 230px; }
  .site-footer { padding: 20px; }
}
.no-gsap .app-gallery,.motion-static .app-gallery {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: 18px;
}
.no-gsap .gallery-card,.motion-static .gallery-card {
  width: 100%;
  min-width: 0;
  height: 704px;
  flex: none;
}
@media (max-width: 1000px) {
  .no-gsap .gallery-card,.motion-static .gallery-card { height: 620px; }
}
@media (max-width: 700px) {
  .no-gsap .gallery-card,.motion-static .gallery-card { height: 548px; }
}