:root { --onto-ink: #0b1930; --onto-navy: #102b51; --onto-blue: #245a96; --onto-mist: #eef3f7; --onto-line: #cbd7df; --onto-teal: #21a393; --onto-orange: #f08a39; --onto-mono: 'DM Mono', monospace; --onto-body: 'Manrope', sans-serif; }
.onto-page { background: var(--onto-mist); color: var(--onto-ink); font-family: var(--onto-body); line-height: 1.55; }.onto-page::before, .onto-page::after { display: none; }.onto-page * { box-sizing: border-box; }
.onto-page :focus-visible { outline-color: var(--onto-orange); }
.onto-nav { min-height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 4.5vw; border-bottom: 1px solid rgba(11,25,48,.12); background: rgba(250,252,253,.94); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); }.onto-brand img,.onto-footer img { width: 148px; height: auto; }.onto-nav-center { display:flex; align-items:center; gap:10px; color:#34546b; font-family:var(--onto-mono); font-size:.67rem; letter-spacing:.12em; }.onto-nav-center i { width:3px; height:3px; border-radius:50%; background:var(--onto-orange); }.onto-back { justify-self:end; color:var(--onto-ink); font-size:.83rem; font-weight:800; }.onto-back i { margin-left:7px; color:var(--onto-blue); }
.onto-hero,.onto-factory,.onto-planes,.onto-trust,.onto-proof,.onto-boundaries,.onto-cta { padding-left:max(4.5vw,24px); padding-right:max(4.5vw,24px); }.onto-hero { min-height:760px; display:grid; grid-template-columns:minmax(330px,.75fr) minmax(540px,1.25fr); align-items:center; gap:7vw; padding-top:82px; padding-bottom:90px; background:radial-gradient(circle at 80% 38%,rgba(120,184,218,.28),transparent 28%),linear-gradient(180deg,#f9fbfc,#e8f0f4); overflow:hidden; }.onto-kicker { margin:0; color:#245a96; font-family:var(--onto-mono); font-size:.68rem; font-weight:500; letter-spacing:.13em; }.onto-hero h1 { max-width:12ch; margin:18px 0 24px; font-family:'Space Grotesk',sans-serif; font-size:clamp(3.15rem,5.2vw,6.2rem); font-weight:600; letter-spacing:-.05em; line-height:.95; }.onto-hero h1 em { color:var(--onto-blue); font-style:normal; }.onto-intro { max-width:54ch; color:#496071; font-size:1.03rem; }.onto-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }.onto-button { display:inline-flex; align-items:center; gap:9px; min-height:46px; padding:0 18px; border:1px solid transparent; border-radius:2px; font-size:.83rem; font-weight:800; transition:transform .2s ease,box-shadow .2s ease; }.onto-button:hover { transform:translateY(-2px); }.onto-button-primary { color:#fff; background:var(--onto-navy); box-shadow:0 8px 18px rgba(16,43,81,.18); }.onto-button-quiet { color:var(--onto-navy); border-color:#a9bbc7; background:rgba(255,255,255,.4); }.onto-hero-metrics { display:flex; gap:24px; margin:48px 0 0; padding-top:20px; border-top:1px solid #b4c5cf; }.onto-hero-metrics div { max-width:108px; }.onto-hero-metrics dt { color:var(--onto-blue); font-family:'Space Grotesk',sans-serif; font-size:1.55rem; font-weight:700; }.onto-hero-metrics dd { margin:3px 0 0; color:#536978; font-size:.69rem; font-weight:700; line-height:1.35; }
.onto-hero-copy,.onto-architecture-figure,.onto-section-intro,.onto-product,.onto-plane,.onto-trust-copy,.onto-proof-copy,.onto-proof-metrics { min-width:0; }.onto-architecture-figure { width:100%; margin:0; padding:18px; border:1px solid #bccbd4; border-radius:5px; background:#fff; box-shadow:24px 26px 0 rgba(36,90,150,.12); transform:rotate(.8deg); }.onto-figure-label { display:flex; align-items:center; gap:7px; margin-bottom:12px; color:#557083; font-family:var(--onto-mono); font-size:.61rem; letter-spacing:.1em; }.onto-figure-label span { width:7px; height:7px; border-radius:50%; background:var(--onto-teal); }.onto-architecture-figure img { display:block; width:100%; aspect-ratio:1.78; object-fit:cover; }.onto-architecture-figure figcaption { padding:12px 2px 1px; color:#4f6776; font-size:.78rem; font-weight:700; }
.onto-statement { display:grid; grid-template-columns:1fr 1fr; gap:4vw; padding:56px max(4.5vw,24px); background:var(--onto-navy); color:#dcecf2; font-family:'Space Grotesk',sans-serif; font-size:clamp(1.5rem,2.5vw,2.6rem); font-weight:500; letter-spacing:-.04em; line-height:1.05; }.onto-statement p { margin:0; max-width:16ch; }.onto-statement-strong { color:#81d8cc; }.onto-factory { padding-top:120px; padding-bottom:120px; background:#f7f9fa; }.onto-section-intro { max-width:720px; }.onto-section-intro h2,.onto-trust h2,.onto-proof h2,.onto-boundaries h2,.onto-cta h2 { margin:15px 0 16px; font-family:'Space Grotesk',sans-serif; font-size:clamp(2.25rem,4.3vw,4.5rem); font-weight:600; letter-spacing:-.05em; line-height:.98; }.onto-section-intro p:not(.onto-kicker) { color:#516978; font-size:1.02rem; }
.onto-product-rail { display:grid; grid-template-columns:repeat(3,1fr); margin-top:64px; border-top:1px solid var(--onto-line); border-bottom:1px solid var(--onto-line); }.onto-product { position:relative; min-height:460px; padding:26px 28px 70px 0; border-right:1px solid var(--onto-line); }.onto-product+.onto-product { padding-left:28px; }.onto-product:last-child { border-right:0; }.onto-product::before { content:''; position:absolute; top:-6px; left:0; width:11px; height:11px; border-radius:50%; background:var(--onto-blue); box-shadow:0 0 0 5px #f7f9fa; }.onto-product.nexo::before { background:var(--onto-orange); }.onto-product.argos::before { background:var(--onto-teal); }.onto-product-head { display:flex; align-items:center; justify-content:space-between; color:#3a5a70; font-family:var(--onto-mono); font-size:.7rem; letter-spacing:.08em; }.onto-product-head i { color:var(--onto-blue); font-size:1.05rem; }.onto-product.nexo .onto-product-head i { color:var(--onto-orange); }.onto-product.argos .onto-product-head i { color:var(--onto-teal); }.onto-product h3 { margin:28px 0 12px; font-family:'Space Grotesk',sans-serif; font-size:1.58rem; letter-spacing:-.035em; }.onto-product p { color:#526a78; font-size:.92rem; }.onto-product ul { display:grid; gap:9px; margin:24px 0 0; padding:0; list-style:none; color:#314e60; font-size:.82rem; }.onto-product li { padding-left:16px; position:relative; }.onto-product li::before { content:'+'; position:absolute; left:0; color:var(--onto-blue); font-weight:800; }.onto-product.nexo li::before { color:var(--onto-orange); }.onto-product.argos li::before { color:var(--onto-teal); }.onto-output { position:absolute; bottom:24px; color:#527184; font-family:var(--onto-mono); font-size:.61rem; letter-spacing:.07em; }
.onto-planes { padding-top:120px; padding-bottom:120px; color:#eef6f8; background:#0a2039; }.onto-planes .onto-kicker { color:#80d7cd; }.onto-planes .onto-section-intro h2 { color:#fff; }.onto-planes .onto-section-intro p:not(.onto-kicker) { color:#b4c8d2; }.onto-plane-grid { display:grid; grid-template-columns:1fr 115px 1fr; align-items:stretch; margin-top:60px; }.onto-plane { min-height:310px; padding:32px; border:1px solid rgba(189,216,228,.25); background:rgba(255,255,255,.045); }.onto-plane-number { color:#80d7cd; font-family:var(--onto-mono); font-size:.68rem; letter-spacing:.12em; }.onto-plane h3 { margin:20px 0 12px; color:#fff; font-family:'Space Grotesk',sans-serif; font-size:1.7rem; letter-spacing:-.04em; line-height:1.05; }.onto-plane p { color:#b7c8d1; font-size:.91rem; }.onto-platforms { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }.onto-platforms span { padding:5px 7px; border:1px solid rgba(189,216,228,.28); color:#a9d6e9; font-family:var(--onto-mono); font-size:.59rem; letter-spacing:.04em; }.onto-contract { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:#80d7cd; font-family:var(--onto-mono); font-size:.61rem; letter-spacing:.08em; }.onto-contract i { font-size:1.2rem; }
.onto-trust { display:grid; grid-template-columns:minmax(300px,.96fr) minmax(320px,.84fr); gap:8vw; align-items:center; padding-top:120px; padding-bottom:120px; background:#e8f0f4; }.onto-trust-visual { padding:15px; background:#fff; border:1px solid #c3d1d9; box-shadow:18px 19px 0 rgba(36,90,150,.12); }.onto-trust-visual img { display:block; width:100%; aspect-ratio:1.48; object-fit:cover; object-position:top center; }.onto-trust-copy p:not(.onto-kicker),.onto-proof-copy p:not(.onto-kicker) { color:#506877; }.onto-guardrails { display:grid; gap:14px; margin-top:30px; }.onto-guardrails div { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; color:#526a78; font-size:.85rem; }.onto-guardrails i { padding-top:4px; color:var(--onto-teal); }.onto-guardrails strong { display:block; color:var(--onto-ink); font-size:.9rem; }
.onto-proof { display:grid; grid-template-columns:.85fr 1.15fr; gap:8vw; padding-top:104px; padding-bottom:104px; background:#f9fbfc; }.onto-inline-link { display:inline-block; margin-top:26px; color:var(--onto-blue); font-size:.88rem; font-weight:800; }.onto-inline-link i { margin-left:7px; }.onto-proof-metrics { display:grid; grid-template-columns:repeat(2,1fr); margin:0; border-left:1px solid var(--onto-line); border-top:1px solid var(--onto-line); }.onto-proof-metrics div { min-height:150px; padding:24px; border-right:1px solid var(--onto-line); border-bottom:1px solid var(--onto-line); }.onto-proof-metrics dt { color:var(--onto-blue); font-family:'Space Grotesk',sans-serif; font-size:2.7rem; font-weight:700; letter-spacing:-.06em; line-height:1; }.onto-proof-metrics dd { margin:10px 0 0; color:#526a78; font-size:.78rem; font-weight:700; line-height:1.4; }.onto-boundaries { padding-top:100px; padding-bottom:100px; background:#dbe5ea; }.onto-boundaries h2 { max-width:14ch; }.onto-boundaries>div { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:42px; background:#aebfc9; border:1px solid #aebfc9; }.onto-boundaries span { padding:20px; background:#dbe5ea; color:#365367; font-size:.92rem; font-weight:700; }.onto-boundaries span::before { content:'—'; margin-right:11px; color:var(--onto-orange); }.onto-cta { padding-top:110px; padding-bottom:110px; background:linear-gradient(135deg,#1c4e86,#0c2948 68%); }.onto-cta .onto-kicker { color:#80d7cd; }.onto-cta h2 { max-width:17ch; color:#fff; }.onto-cta .onto-button { margin-top:14px; background:#80d7cd; color:#09223a; box-shadow:none; }.onto-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:30px max(4.5vw,24px); background:#07182a; color:#95adba; font-family:var(--onto-mono); font-size:.62rem; letter-spacing:.07em; }.onto-footer img { opacity:.9; }
@media (max-width:900px) { .onto-hero { min-height:auto; grid-template-columns:minmax(0,1fr); gap:55px; }.onto-hero h1 { max-width:14ch; }.onto-architecture-figure { max-width:780px; }.onto-trust,.onto-proof { grid-template-columns:minmax(0,1fr); }.onto-plane-grid { grid-template-columns:minmax(0,1fr); }.onto-contract { height:74px; flex-direction:row; }.onto-contract i { transform:rotate(90deg); }.onto-product { min-height:490px; } }
@media (max-width:650px) { .onto-nav { min-height:64px; grid-template-columns:1fr auto; padding:0 20px; }.onto-nav-center { display:none; }.onto-brand img { width:126px; }.onto-hero,.onto-factory,.onto-planes,.onto-trust,.onto-proof,.onto-boundaries,.onto-cta { padding-left:20px; padding-right:20px; }.onto-hero { padding-top:60px; padding-bottom:62px; }.onto-hero h1 { font-size:clamp(2.75rem,14vw,4.2rem); }.onto-hero-metrics { gap:13px; }.onto-hero-metrics dt { font-size:1.3rem; }.onto-hero-metrics dd { font-size:.61rem; }.onto-architecture-figure { padding:10px; box-shadow:10px 11px 0 rgba(36,90,150,.12); transform:none; }.onto-statement { grid-template-columns:1fr; gap:18px; padding:42px 20px; }.onto-factory,.onto-planes,.onto-trust,.onto-proof,.onto-boundaries,.onto-cta { padding-top:76px; padding-bottom:76px; }.onto-product-rail { grid-template-columns:1fr; }.onto-product,.onto-product+.onto-product { min-height:auto; padding:25px 0 66px; border-right:0; border-bottom:1px solid var(--onto-line); }.onto-product:last-child { border-bottom:0; }.onto-product::before { top:-6px; }.onto-section-intro h2,.onto-trust h2,.onto-proof h2,.onto-boundaries h2,.onto-cta h2 { font-size:clamp(2.3rem,11vw,3.4rem); }.onto-plane { min-height:auto; padding:26px; }.onto-proof-metrics { grid-template-columns:1fr; }.onto-proof-metrics div { min-height:130px; padding:17px; }.onto-proof-metrics dt { font-size:2.25rem; }.onto-boundaries>div { grid-template-columns:1fr; }.onto-footer { flex-wrap:wrap; }.onto-footer span:last-child { margin-left:auto; } }