/*
Theme Name: ONTER GeneratePress Child
Theme URI: https://onter.vn/
Description: Lightweight WordPress theme preserving ONTER's blue-green visual identity.
Author: ONTER
Template: generatepress
Version: 1.1.0
Text Domain: onter
*/

:root {
  --onter-primary: #00aeef;
  --onter-secondary: #00b848;
  --onter-accent: #ff8e01;
  --onter-text: #465363;
  --onter-heading: #162441;
  --onter-muted: #6e6d7a;
  --onter-background: #f0f3f6;
  --onter-border: #dce4e9;
  --onter-white: #fff;
  --onter-soft-blue: #f3fbfe;
  --onter-soft-green: #eefaf4;
  --onter-radius: 14px;
  --onter-shadow: 0 12px 34px rgba(12, 52, 98, .08);
  --onter-container: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body { margin: 0; color: var(--onter-text); background: var(--onter-white); font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.65; overflow-x: hidden; }
a { color: #008ec5; text-decoration-thickness: .075em; text-underline-offset: .18em; }
a:hover { color: #0076a3; }
img { max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; }
:focus-visible { outline: 3px solid rgba(0, 174, 239, .42); outline-offset: 3px; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.onter-container { width: min(100% - 40px, var(--onter-container)); margin-inline: auto; }
.onter-section { padding: 82px 0; }
.onter-section--soft { background: var(--onter-background); }
.onter-section--navy { color: #fff; background: var(--onter-heading); }
.onter-eyebrow { margin: 0 0 10px; color: #008ec5; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.onter-section--navy .onter-eyebrow { color: #58d4ff; }
h1, h2, h3 { color: var(--onter-heading); font-weight: 700; line-height: 1.18; letter-spacing: -.018em; text-wrap: balance; }
h1 { margin: 0 0 22px; font-size: clamp(2.4rem, 4.5vw, 4.2rem); }
h2 { margin: 0 0 18px; font-size: clamp(1.9rem, 3vw, 3rem); }
h3 { margin: 0 0 10px; font-size: 1.25rem; }
.onter-section--navy h1, .onter-section--navy h2, .onter-section--navy h3 { color: #fff; }
.onter-lead { max-width: 760px; color: var(--onter-muted); font-size: clamp(1.04rem, 1.6vw, 1.2rem); }
.onter-section--navy .onter-lead { color: #c9d6e4; }
.onter-btn { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px; border: 1px solid transparent; border-radius: 999px; background: var(--onter-primary); color: #fff; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .18s, box-shadow .18s, background .18s; }
.onter-btn:hover { color: #fff; background: #009bd5; box-shadow: 0 9px 22px rgba(0, 174, 239, .24); transform: translateY(-1px); }
.onter-btn--ghost { border-color: var(--onter-border); background: #fff; color: var(--onter-heading); }
.onter-btn--ghost:hover { color: #007cae; background: var(--onter-soft-blue); }
.onter-btn--small { min-height: 40px; padding: 9px 16px; font-size: 14px; }
.onter-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.onter-header { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgba(220, 228, 233, .92); background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px); }
.admin-bar .onter-header { top: 32px; }
.onter-header__inner { min-height: 66px; display: flex; align-items: center; gap: 18px; }
.onter-logo { flex: 0 0 auto; display: inline-flex; align-items: center; line-height: 0; }
.onter-logo img { width: 150px; height: 41px; object-fit: contain; }
.onter-nav { margin-left: auto; }
.onter-nav ul { display: flex; align-items: center; gap: 19px; padding: 0; margin: 0; list-style: none; }
.onter-nav a { color: #3f4853; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.onter-nav a:hover, .onter-nav .current-menu-item > a { color: #008ec5; }
.onter-header__cta { min-height: 38px; padding: 8px 15px; font-size: 13px; }
.onter-menu-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--onter-border); border-radius: 10px; background: #fff; color: var(--onter-heading); }
.onter-menu-toggle svg { width: 21px; }

.onter-hero { position: relative; min-height: 650px; display: flex; align-items: center; background: linear-gradient(112deg, #f2fbfe 0%, #f5fbfd 58%, #ebfaf3 100%); overflow: hidden; }
.onter-hero::after { content: ""; position: absolute; right: -110px; bottom: -170px; width: 520px; height: 520px; border: 1px solid rgba(0, 184, 72, .13); border-radius: 50%; }
.onter-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); align-items: center; gap: 64px; }
.onter-hero__copy { padding: 76px 0; }
.onter-hero h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); }
.onter-hero__statement { max-width: 680px; margin: 0 0 14px; color: var(--onter-heading); font-size: clamp(1.14rem, 1.9vw, 1.4rem); font-weight: 600; }
.onter-services-line { margin-top: 28px; color: var(--onter-muted); font-size: 13px; font-weight: 700; letter-spacing: .035em; }
.onter-hero__visual { position: relative; align-self: stretch; display: flex; align-items: flex-end; justify-content: center; padding-top: 32px; }
.onter-hero__visual > img { width: min(100%, 540px); max-height: 650px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 18px 28px rgba(12, 52, 98, .11)); }
.onter-hero__badge { position: absolute; right: 2%; bottom: 15%; display: grid; padding: 14px 18px; border: 1px solid rgba(0, 174, 239, .18); border-radius: 12px; background: rgba(255, 255, 255, .95); box-shadow: var(--onter-shadow); }
.onter-hero__badge strong { color: var(--onter-secondary); font-size: 1.35rem; }
.onter-hero__badge span { color: var(--onter-muted); font-size: 12px; }

.onter-manifesto { display: grid; grid-template-columns: .82fr 1.18fr; gap: 72px; align-items: start; }
.onter-manifesto p { margin-top: 0; }
.onter-quote { padding: 24px 26px; border-left: 4px solid var(--onter-secondary); border-radius: 0 12px 12px 0; background: var(--onter-soft-green); color: #1b6940; font-size: 1.15rem; font-weight: 700; }
.onter-grid { display: grid; gap: 20px; }
.onter-grid--4 { grid-template-columns: repeat(4, 1fr); }
.onter-grid--3 { grid-template-columns: repeat(3, 1fr); }
.onter-card { padding: 26px; border: 1px solid var(--onter-border); border-radius: var(--onter-radius); background: #fff; box-shadow: 0 7px 22px rgba(12, 52, 98, .045); }
.onter-card__number { display: block; margin-bottom: 18px; color: var(--onter-secondary); font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.onter-card p, .onter-card ul { color: var(--onter-muted); }
.onter-card__link { display: inline-block; margin-top: 10px; font-weight: 700; }
.onter-template-feature { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.onter-template-stack { position: relative; min-height: 390px; }
.onter-template-stack__item { position: absolute; width: 66%; aspect-ratio: 1.39; object-fit: cover; object-position: top; border: 8px solid #fff; border-radius: 14px; box-shadow: var(--onter-shadow); }
.onter-template-stack__item--1 { top: 5%; left: 0; transform: rotate(-3deg); }
.onter-template-stack__item--2 { top: 18%; right: 0; transform: rotate(3deg); }
.onter-template-stack__item--3 { bottom: 0; left: 18%; }
.onter-capability { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.onter-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; padding: 0; margin: 24px 0; list-style: none; }
.onter-checks li { position: relative; padding: 12px 13px 12px 38px; border: 1px solid var(--onter-border); border-radius: 10px; background: #fff; }
.onter-checks li::before { content: "✓"; position: absolute; left: 14px; color: var(--onter-secondary); font-weight: 900; }
.onter-process { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; margin: 0; list-style: none; }
.onter-process li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; padding: 18px; border: 1px solid #34445d; border-radius: 12px; background: #1b2b47; }
.onter-process span { grid-row: 1 / 3; color: #58d4ff; font-size: 13px; font-weight: 800; }
.onter-process strong { color: #fff; }
.onter-process small { color: #b9c7d8; }
.onter-project { overflow: hidden; padding: 0; }
.onter-project__visual { min-height: 150px; display: flex; align-items: end; padding: 24px; background: linear-gradient(135deg, #e9f9fe, #e9f8ef); color: var(--onter-heading); font-size: 1.35rem; font-weight: 800; }
.onter-project__body { padding: 24px; }
.onter-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.onter-tag { display: inline-flex; padding: 4px 9px; border-radius: 999px; background: var(--onter-soft-blue); color: #08799e; font-size: 11px; font-weight: 700; }
.onter-post-card { overflow: hidden; padding: 0; }
.onter-post-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.onter-post-card__body { padding: 22px; }
.onter-meta { color: var(--onter-muted); font-size: 13px; }

.onter-cta { padding: 48px; border: 1px solid var(--onter-border); border-top: 4px solid var(--onter-primary); border-radius: 18px; background: #fff; box-shadow: var(--onter-shadow); }
.onter-cta > p { max-width: 760px; }
.onter-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 28px; }
.onter-field--full { grid-column: 1 / -1; }
.onter-field label { display: block; margin-bottom: 5px; color: var(--onter-heading); font-size: 13px; font-weight: 700; }
.onter-field input, .onter-field textarea, .onter-field select { width: 100%; min-height: 46px; padding: 10px 13px; border: 1px solid #bfcbd3; border-radius: 9px; background: #fff; color: var(--onter-heading); }
.onter-field textarea { min-height: 112px; resize: vertical; }
.onter-field input:focus, .onter-field textarea:focus, .onter-field select:focus { border-color: var(--onter-primary); outline: 3px solid rgba(0, 174, 239, .1); }
.onter-consent { display: flex; gap: 9px; align-items: flex-start; color: var(--onter-text); font-size: 13px; }
.onter-consent input { margin-top: 5px; }
.onter-form__hint { margin: -4px 0 0; color: var(--onter-muted); font-size: 12px; }
.onter-template-choice { padding: 10px 13px; border-radius: 9px; background: var(--onter-soft-green); color: #1d6640; }
.onter-template-choice[hidden] { display: none; }
.onter-notice { padding: 12px 15px; border: 1px solid #bfe7cf; border-radius: 9px; background: #e8f8ef; color: #14572c; }
.onter-notice--warning { border-color: #f1d49f; background: #fff6e5; color: #784f08; }

.onter-page-hero { padding: 68px 0 58px; border-bottom: 1px solid var(--onter-border); background: linear-gradient(112deg, var(--onter-soft-blue), var(--onter-soft-green)); }
.onter-page-hero h1 { max-width: 920px; font-size: clamp(2.3rem, 4vw, 3.8rem); }
.onter-breadcrumbs { display: flex; gap: 8px; margin-bottom: 18px; color: var(--onter-muted); font-size: 13px; }
.onter-content { width: min(100% - 40px, 840px); margin: 0 auto; padding: 62px 0 92px; }
.onter-content > * { max-width: 100%; }
.onter-content h2 { margin-top: 44px; font-size: 2rem; }
.onter-content h3 { margin-top: 30px; }
.onter-content img { border-radius: 12px; }
.onter-content table { width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.onter-content th, .onter-content td { padding: 11px; border: 1px solid var(--onter-border); }

.onter-page-hero--gallery { padding-bottom: 52px; }
.onter-gallery-search { max-width: 760px; display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-top: 28px; }
.onter-gallery-search input { width: 100%; min-height: 50px; padding: 11px 17px; border: 1px solid #b9c8d1; border-radius: 999px; background: #fff; color: var(--onter-heading); }
.onter-gallery-section { padding-top: 42px; }
.onter-filter { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 30px; border-bottom: 1px solid var(--onter-border); }
.onter-filter a { padding: 8px 13px; border: 1px solid var(--onter-border); border-radius: 999px; background: #fff; color: var(--onter-text); font-size: 13px; font-weight: 600; text-decoration: none; }
.onter-filter a:hover, .onter-filter a.is-active { border-color: var(--onter-primary); background: var(--onter-primary); color: #fff; }
.onter-gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 42px 0 24px; }
.onter-gallery-heading h2 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.onter-gallery-heading > p { margin: 0; color: var(--onter-muted); white-space: nowrap; }
.onter-gallery-heading > p strong { color: var(--onter-secondary); }
.onter-template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.onter-template-card { overflow: hidden; border: 1px solid var(--onter-border); border-radius: var(--onter-radius); background: #fff; box-shadow: 0 7px 24px rgba(12, 52, 98, .055); }
.onter-template-card__media { aspect-ratio: 1.39; overflow: hidden; border-bottom: 1px solid var(--onter-border); background: var(--onter-background); }
.onter-template-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .28s ease; }
.onter-template-card:hover .onter-template-card__media img { transform: scale(1.025); }
.onter-template-card__body { padding: 18px; }
.onter-template-card__meta { min-height: 19px; overflow: hidden; color: var(--onter-muted); font-size: 11px; line-height: 1.45; white-space: nowrap; text-overflow: ellipsis; }
.onter-template-card h3 { margin: 7px 0 10px; font-size: 1.08rem; }
.onter-template-card .onter-template-consult { width: 100%; margin-top: 16px; }
.onter-pagination { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 38px; }
.onter-pagination .page-numbers { min-width: 40px; height: 40px; display: inline-grid; place-items: center; padding: 0 10px; border: 1px solid var(--onter-border); border-radius: 9px; background: #fff; color: var(--onter-heading); text-decoration: none; }
.onter-pagination .page-numbers:hover, .onter-pagination .page-numbers.current { border-color: var(--onter-primary); background: var(--onter-primary); color: #fff; }
.onter-empty { padding: 50px 20px; border: 1px dashed #b9c8d1; border-radius: var(--onter-radius); background: var(--onter-soft-blue); text-align: center; }

.onter-footer { padding: 64px 0 22px; background: #162441; color: #c2cfdb; }
.onter-footer h3 { color: #fff; font-size: 1rem; }
.onter-footer__grid { display: grid; grid-template-columns: 1.35fr .8fr 1.25fr .9fr; gap: 40px; }
.onter-footer__logo { display: inline-flex; margin-bottom: 16px; padding: 7px 10px; border-radius: 8px; background: #fff; line-height: 0; }
.onter-footer__logo img { width: 135px; }
.onter-footer ul { padding: 0; margin: 0; list-style: none; }
.onter-footer li { margin: 7px 0; }
.onter-footer a { color: #d8e5ef; text-decoration: none; }
.onter-footer a:hover { color: #58d4ff; }
.onter-footer__bottom { margin-top: 42px; padding-top: 18px; border-top: 1px solid #34445d; font-size: 12px; }

@media (max-width: 1180px) {
  .onter-header__cta { display: none; }
  .onter-menu-toggle { display: inline-flex; margin-left: auto; }
  .onter-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; padding: 14px 20px 20px; border-bottom: 1px solid var(--onter-border); background: #fff; }
  .onter-nav.is-open { display: block; }
  .onter-nav ul { width: min(100%, var(--onter-container)); display: grid; gap: 2px; margin: auto; }
  .onter-nav a { display: block; padding: 9px; }
  .onter-template-grid { grid-template-columns: repeat(3, 1fr); }
  .onter-grid--4 { grid-template-columns: 1fr 1fr; }
  .onter-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .onter-hero { min-height: auto; }
  .onter-hero__grid { grid-template-columns: 1fr; gap: 0; }
  .onter-hero__copy { padding: 64px 0 20px; }
  .onter-hero__visual { max-height: 520px; }
  .onter-hero__visual > img { max-height: 500px; }
  .onter-manifesto, .onter-template-feature, .onter-capability { grid-template-columns: 1fr; gap: 38px; }
  .onter-template-stack { min-height: 360px; }
  .onter-template-grid { grid-template-columns: repeat(2, 1fr); }
  .onter-grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 15px; }
  .admin-bar .onter-header { top: 46px; }
  .onter-container { width: min(100% - 28px, var(--onter-container)); }
  .onter-section { padding: 62px 0; }
  .onter-header__inner { min-height: 62px; }
  .onter-logo img { width: 132px; height: auto; }
  .onter-hero__copy { padding-top: 54px; }
  .onter-hero__badge { right: 0; bottom: 10%; }
  .onter-grid--4, .onter-grid--3 { grid-template-columns: 1fr; }
  .onter-process { grid-template-columns: 1fr; }
  .onter-checks { grid-template-columns: 1fr; }
  .onter-cta { padding: 30px 20px; }
  .onter-form { grid-template-columns: 1fr; }
  .onter-field--full { grid-column: auto; }
  .onter-gallery-search { grid-template-columns: 1fr; }
  .onter-gallery-search .onter-btn { width: 100%; }
  .onter-gallery-heading { align-items: start; flex-direction: column; }
  .onter-footer__grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 540px) {
  h1 { font-size: 2.35rem; }
  .onter-template-grid { grid-template-columns: 1fr; }
  .onter-template-stack { min-height: 300px; }
  .onter-template-stack__item { width: 76%; }
  .onter-filter { flex-wrap: nowrap; margin-inline: -14px; padding-inline: 14px; overflow-x: auto; scrollbar-width: thin; }
  .onter-filter a { flex: 0 0 auto; }
  .onter-hero__visual { max-height: 440px; }
  .onter-hero__visual > img { max-height: 420px; }
  .onter-hero__badge { padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Phase 3 — typography, editorial UI and conversion surfaces */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("assets/fonts/roboto-vi-variable.woff2") format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url("assets/fonts/roboto-latin-variable.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;color:#3d4b5f;line-height:1.7}
h1,h2,h3{font-weight:600;letter-spacing:-.028em}.onter-hero h1{font-size:clamp(3rem,4.5vw,3.5rem);line-height:1.12}.onter-page-hero h1,.onter-article-header h1{font-size:clamp(2.7rem,4.5vw,3.5rem)}h2{font-size:clamp(2rem,3vw,2.7rem)}
.onter-hero--phase3{background:linear-gradient(135deg,#f7fcff 0,#fff 48%,#f2fbf7 100%)}
.onter-hero--phase3 .onter-hero__grid{min-height:680px;align-items:center}.onter-benefits{display:grid;gap:9px;margin:26px 0;padding:0;list-style:none}.onter-benefits li{position:relative;padding-left:28px;font-weight:500}.onter-benefits li:before{position:absolute;left:0;content:"✓";color:var(--onter-secondary);font-weight:800}
.onter-ecosystem{position:relative;overflow:hidden;min-height:490px;padding:26px;border:1px solid rgba(0,174,239,.2);border-radius:28px;background:#10203b;color:#fff;box-shadow:0 32px 70px rgba(13,38,73,.18)}.onter-ecosystem:after{position:absolute;width:260px;height:260px;right:-110px;top:-100px;border-radius:50%;background:#00aeef;filter:blur(80px);opacity:.3;content:""}.onter-eco__top{display:flex;align-items:center;gap:7px;color:#8fa4c3;font-size:11px;letter-spacing:.1em}.onter-eco__top span{margin-right:auto}.onter-eco__top i{width:8px;height:8px;border-radius:50%;background:#00b848}.onter-eco__body{display:grid;grid-template-columns:1fr 1.3fr;align-items:end;gap:22px;margin-top:42px;padding:24px;border:1px solid #2e405d;border-radius:18px;background:#172a49}.onter-eco__metric small,.onter-eco__metric strong,.onter-eco__metric em{display:block}.onter-eco__metric strong{font-size:2rem}.onter-eco__metric em{color:#52df8e;font-style:normal}.onter-eco__chart{height:130px;display:flex;align-items:end;gap:10px}.onter-eco__chart b{flex:1;border-radius:6px 6px 2px 2px;background:linear-gradient(#00aeef,#0877a5)}.onter-eco__nodes{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}.onter-eco__nodes article{padding:15px;border:1px solid #2e405d;border-radius:14px;background:#172a49}.onter-eco__nodes span{display:inline-grid;width:34px;height:25px;place-items:center;border-radius:6px;background:#00aeef;color:#fff;font-size:10px;font-weight:700}.onter-eco__nodes strong,.onter-eco__nodes small{display:block;margin-top:9px}.onter-eco__nodes strong{font-size:12px}.onter-eco__nodes small{color:#9aabc2;font-size:10px}
.onter-services{display:grid;gap:32px;margin-top:46px}.onter-service-row,.onter-showcase{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:70px;padding:34px 0}.onter-service-row.is-reverse>div:first-child,.onter-showcase.is-reverse>div:first-child{order:2}.onter-service-row h3,.onter-showcase h3{font-size:clamp(1.7rem,3vw,2.3rem)}.onter-checks{display:grid;gap:9px;padding:0;list-style:none}.onter-checks li{padding-left:27px;position:relative}.onter-checks li:before{position:absolute;left:0;color:var(--onter-secondary);content:"●"}
.onter-ui-card{min-height:310px;padding:20px;border:1px solid #d5e2e9;border-radius:22px;background:#f7fbfd;box-shadow:var(--onter-shadow);transform:rotate(1.2deg)}.is-reverse .onter-ui-card{transform:rotate(-1.2deg)}.onter-ui-card__bar{height:46px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:10px;background:#162441;color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em}.onter-ui-card__bar span{margin-right:auto}.onter-ui-card__bar i{width:8px;height:8px;border-radius:50%;background:#00b848}.onter-ui-card__content{position:relative;height:220px;display:grid;grid-template-columns:1.3fr .8fr;gap:13px;padding-top:18px}.onter-ui-card__content span{display:block;border-radius:12px;background:linear-gradient(135deg,#fff,#e5f6fc);border:1px solid #dce9ef}.onter-ui-card__content span:first-child{grid-row:span 2}.onter-ui-card__content b{position:absolute;left:28px;right:44%;bottom:30px;height:70px;border-left:4px solid #00aeef;border-bottom:4px solid #00aeef;transform:skewY(-12deg);opacity:.8}.onter-ui-card--crm .onter-ui-card__content{grid-template-columns:repeat(3,1fr)}.onter-ui-card--kpi .onter-ui-card__content span:first-child{background:conic-gradient(#00aeef 0 72%,#dce9ef 72%);border-radius:50%;margin:25px}.onter-ui-card--web .onter-ui-card__content span:first-child{background:linear-gradient(150deg,#dff5fd 0 48%,#fff 48%)}.onter-ui-card--mkt .onter-ui-card__content b{height:110px;border-color:#00b848}
.onter-need-grid{grid-template-columns:repeat(5,1fr)}.onter-need-grid .onter-card{padding:24px}.onter-text-button{padding:0;border:0;background:none;color:#008ec5;font-weight:700;cursor:pointer}.onter-need-grid h3{font-size:1.12rem}
.onter-showcases{display:grid;gap:34px;margin-top:38px}.onter-project-screen{display:grid;grid-template-columns:26% 1fr;min-height:280px;overflow:hidden;border-radius:20px;background:#11213d;box-shadow:var(--onter-shadow)}.onter-project-screen__nav{margin:16px;border-radius:10px;background:#1f3455}.onter-project-screen__main{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:30px 24px}.onter-project-screen__main span{grid-column:1/-1;color:#fff;font-size:1.4rem;font-weight:700}.onter-project-screen__main b{height:130px;border-radius:13px;background:linear-gradient(160deg,#00aeef,#0875a3)}.onter-project-screen__main b:nth-child(3){background:linear-gradient(160deg,#00b848,#08753a)}.onter-project-screen__main b:nth-child(4){background:linear-gradient(160deg,#ff8e01,#c76500)}
.onter-cta--compact{display:flex;align-items:center;justify-content:space-between;gap:40px}.onter-cta--compact h2{margin-bottom:7px}.onter-cta--compact p{margin-bottom:0}.onter-modal[hidden]{display:none}.onter-modal{position:fixed;z-index:99999;inset:0;display:grid;place-items:center;padding:20px}.onter-modal__overlay{position:absolute;inset:0;background:rgba(7,20,39,.72);backdrop-filter:blur(5px)}.onter-modal__dialog{position:relative;width:min(100%,760px);max-height:calc(100vh - 40px);overflow:auto;padding:36px;border-radius:22px;background:#fff;box-shadow:0 30px 90px rgba(0,0,0,.3)}.onter-modal__close{position:absolute;top:14px;right:14px;width:42px;height:42px;border:0;border-radius:50%;background:#edf3f6;color:#162441;font-size:26px;cursor:pointer}.onter-modal__intro{margin-top:-8px}.onter-modal-open{overflow:hidden}.onter-form__status{min-height:24px;margin:0;color:#b42318;font-weight:600}.onter-form__status.is-success{padding:12px;border-radius:10px;background:#eaf9f0;color:#087b3a}.onter-form button[disabled]{opacity:.65;cursor:wait}
.onter-pricing-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0}.onter-pricing-tabs button{padding:10px 17px;border:1px solid var(--onter-border);border-radius:999px;background:#fff;color:var(--onter-heading);font-weight:700;cursor:pointer}.onter-pricing-tabs button[aria-selected="true"]{border-color:#00aeef;background:#00aeef;color:#fff}.onter-pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.onter-price-card{position:relative;padding:28px;border:1px solid var(--onter-border);border-radius:18px;background:#fff;box-shadow:var(--onter-shadow)}.onter-price-card.is-featured{border:2px solid var(--onter-secondary);transform:translateY(-8px)}.onter-price-card__badge{position:absolute;top:-14px;right:20px;padding:5px 11px;border-radius:99px;background:#00b848;color:#fff;font-size:11px;font-weight:700}.onter-price-old{text-decoration:line-through;color:#7f8b99}.onter-price{display:block;margin:4px 0;color:#162441;font-size:2rem;font-weight:700}.onter-price-discount{color:#008440;font-size:13px;font-weight:700}.onter-price-card ul{padding-left:20px}.onter-price-card .onter-btn{width:100%}.onter-scope-card{max-width:850px;padding:34px;border-radius:18px;background:#f0f6f8}.onter-scope-card ul{columns:2}
.onter-post-card__media{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:14px 14px 0 0}.onter-post-card__media img{width:100%;height:100%;object-fit:cover}.onter-post-card__meta,.onter-article-meta{color:#718096;font-size:13px}.onter-blog-feature{display:grid;grid-template-columns:1.25fr 1fr;overflow:hidden;margin:35px 0 50px;border-radius:22px;background:#162441;color:#dce7f2}.onter-blog-feature img{width:100%;height:100%;min-height:390px;object-fit:cover}.onter-blog-feature__copy{padding:42px}.onter-blog-feature h2,.onter-blog-feature a{color:#fff}.onter-category-filter{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.onter-category-filter a{padding:7px 13px;border:1px solid var(--onter-border);border-radius:99px;text-decoration:none}.onter-article-header{max-width:900px;margin:auto;text-align:center}.onter-article-deck{font-size:1.2rem;color:#667386}.onter-article-image{display:block;width:min(1100px,100%);max-height:620px;margin:36px auto 0;border-radius:20px;object-fit:cover}.onter-article-layout{display:grid;grid-template-columns:220px minmax(0,760px);justify-content:center;gap:54px}.onter-toc{position:sticky;top:100px;align-self:start;padding:18px;border-left:2px solid #dbe6eb}.onter-toc a{display:block;margin:8px 0;color:#546274;font-size:13px;text-decoration:none}.onter-article-content{font-size:1.06rem}.onter-article-content h2{margin-top:2.1em;font-size:1.8rem}.onter-article-content h3{margin-top:1.8em}.onter-related{border-top:1px solid var(--onter-border)}
@media(max-width:1100px){.onter-need-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.onter-hero--phase3 .onter-hero__grid{min-height:auto}.onter-ecosystem{margin-bottom:60px}.onter-service-row,.onter-showcase{grid-template-columns:1fr;gap:24px}.onter-service-row.is-reverse>div:first-child,.onter-showcase.is-reverse>div:first-child{order:0}.onter-blog-feature{grid-template-columns:1fr}.onter-blog-feature img{min-height:280px}.onter-article-layout{grid-template-columns:1fr}.onter-toc{position:static;border-left:0;border-top:2px solid #dbe6eb}.onter-pricing-grid{grid-template-columns:1fr}.onter-price-card.is-featured{transform:none}}
@media(max-width:700px){.onter-hero h1,.onter-page-hero h1,.onter-article-header h1{font-size:clamp(2.15rem,10vw,2.5rem)}.onter-ecosystem{min-height:auto;padding:16px}.onter-eco__body{grid-template-columns:1fr}.onter-eco__chart{height:90px}.onter-eco__nodes{grid-template-columns:1fr}.onter-ui-card{min-height:260px}.onter-need-grid{grid-template-columns:1fr}.onter-cta--compact{align-items:flex-start;flex-direction:column}.onter-modal{padding:0;align-items:end}.onter-modal__dialog{max-height:94vh;padding:28px 18px;border-radius:20px 20px 0 0}.onter-scope-card ul{columns:1}.onter-blog-feature__copy{padding:26px}.onter-project-screen{min-height:220px}.onter-project-screen__main b{height:95px}}

/* Phase 4 — production font, authentic project imagery and final visual balance */
body{font-size:16px}.onter-nav a,.onter-btn,button,input,textarea,select,.onter-footer{font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif}.onter-nav a{font-size:15px}.onter-hero h1{max-width:720px;font-size:clamp(3rem,4.1vw,3.375rem);font-weight:700;letter-spacing:-.035em}.onter-hero__statement{max-width:660px;font-size:18px}.onter-section h2{font-size:clamp(2.15rem,3vw,2.625rem);font-weight:700}.onter-eyebrow{border:0!important;padding:0!important;background:none!important}
.onter-hero--phase4{background:linear-gradient(135deg,#f5fcff,#fff 52%,#f2fbf6)}.onter-hero--phase4 .onter-hero__grid{min-height:650px;align-items:center}.onter-hero-sites{position:relative;min-height:500px}.onter-browser-frame{position:absolute;inset:28px 22px 58px 0;overflow:hidden;padding-top:32px;border:1px solid #cfdee6;border-radius:18px;background:#fff;box-shadow:0 28px 65px rgba(18,54,90,.16)}.onter-browser-frame>span{position:absolute;top:13px;width:8px;height:8px;border-radius:50%;background:#d7e1e7}.onter-browser-frame>span:nth-child(1){left:16px;background:#ff836c}.onter-browser-frame>span:nth-child(2){left:30px;background:#ffc857}.onter-browser-frame>span:nth-child(3){left:44px;background:#65d68c}.onter-browser-frame img{width:100%;height:100%;object-fit:cover;object-position:top}.onter-phone-frame{position:absolute;right:0;bottom:28px;width:180px;overflow:hidden;padding:8px;border:7px solid #15233e;border-radius:24px;background:#fff;box-shadow:0 20px 45px rgba(13,42,74,.2)}.onter-phone-frame img{width:100%;aspect-ratio:9/16;object-fit:cover;object-position:top;border-radius:12px}.onter-hero-sites>p{position:absolute;left:20px;bottom:12px;margin:0;color:#627083;font-size:13px;font-weight:600}
.onter-problem-list{display:grid;grid-template-columns:1fr 1fr;gap:0 64px;margin-top:44px}.onter-problem-list article{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:24px 0;border-top:1px solid #dfe7eb}.onter-problem-list strong{color:#00aeef;font-size:13px}.onter-problem-list h3{font-size:1.25rem}.onter-problem-list p{margin:0}
.onter-service-stack{margin-top:42px}.onter-service-split{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(500px,1.2fr);align-items:center;gap:70px;padding:50px 0;border-bottom:1px solid #dce6eb}.onter-service-split:last-child{border-bottom:0}.onter-service-split.is-reverse>div:first-child{order:2}.onter-service-kicker{margin:0 0 8px;color:#008fc7;font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}.onter-service-split h3{font-size:clamp(1.8rem,3vw,2.35rem)}.onter-simple-checks{display:grid;gap:10px;margin:22px 0;padding:0;list-style:none}.onter-simple-checks li{position:relative;padding-left:27px}.onter-simple-checks li:before{position:absolute;left:0;color:#00b848;font-weight:700;content:"✓"}
.onter-visual{min-height:330px;padding:24px;border-radius:22px;background:#fff;box-shadow:0 18px 48px rgba(18,54,90,.1)}.onter-visual--agent{display:grid;grid-template-columns:.7fr 1.3fr;gap:18px;background:#edf8fc}.onter-visual--agent aside{display:grid;align-content:start;gap:9px;padding:20px;border-radius:15px;background:#132441;color:#fff}.onter-visual--agent aside span{padding:10px;border-radius:8px;background:#223a5e;color:#cbd9e8;font-size:12px}.onter-visual--agent main{display:flex;flex-direction:column;justify-content:center}.onter-chat{max-width:88%;margin:7px 0;padding:13px 15px;border-radius:14px;font-size:14px}.onter-chat.is-user{align-self:flex-end;background:#00aeef;color:#fff}.onter-chat.is-ai{background:#fff;color:#26374e}.onter-visual--agent main small{color:#07833e}
.onter-visual--chatbot{display:grid;place-items:center;background:linear-gradient(145deg,#f4fbff,#e9f7f0)}.onter-messenger{width:min(100%,400px);overflow:hidden;border:1px solid #d7e3e8;border-radius:18px;background:#fff;box-shadow:0 14px 36px rgba(16,54,87,.1)}.onter-messenger header{display:flex;justify-content:space-between;padding:16px 18px;background:#132441;color:#fff}.onter-messenger header small{color:#70dda0}.onter-messenger p{width:max-content;max-width:76%;margin:14px;padding:10px 13px;border-radius:14px;font-size:13px}.onter-messenger .from-customer{margin-left:auto;background:#00aeef;color:#fff}.onter-messenger .from-bot{background:#edf2f5}.onter-messenger footer{padding:12px 16px;background:#eaf9f0;color:#087d3b;font-size:12px;font-weight:700}
.onter-visual--crm{display:grid;place-items:center;background:#f5f8fa}.onter-kanban{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.onter-kanban section{min-height:250px;padding:14px;border-radius:13px;background:#e9eff3}.onter-kanban section>b{display:block;margin-bottom:14px;font-size:12px;text-transform:uppercase}.onter-kanban span{display:block;margin:9px 0;padding:12px;border-left:3px solid #00aeef;border-radius:8px;background:#fff;font-weight:600}.onter-kanban small{display:block;color:#718096;font-weight:400}
.onter-visual--dashboard{display:grid;grid-template-rows:auto 1fr;gap:20px;background:#132441;color:#fff}.onter-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.onter-kpis span{padding:16px;border:1px solid #2f4768;border-radius:12px;background:#1c3151}.onter-kpis small,.onter-kpis b,.onter-kpis em{display:block}.onter-kpis small{color:#aebdd0}.onter-kpis b{margin:5px 0;font-size:1.35rem}.onter-kpis em{color:#61de99;font-size:12px;font-style:normal}.onter-bars{height:170px;display:flex;align-items:end;gap:14px;padding:20px 18px 0;border-left:1px solid #3b506d;border-bottom:1px solid #3b506d}.onter-bars i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(#00aeef,#087bac)}
.onter-website-feature{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:70px}.onter-site-collage{position:relative;min-height:480px}.onter-site-collage img{position:absolute;width:72%;aspect-ratio:16/10;object-fit:cover;object-position:top;border:7px solid #fff;border-radius:16px;box-shadow:0 18px 40px rgba(18,54,90,.15)}.onter-site-collage .item-1{top:0;left:0}.onter-site-collage .item-2{top:95px;right:0}.onter-site-collage .item-3{bottom:0;left:12%}
.onter-section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px}.onter-project-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}.onter-project-grid--archive{grid-template-columns:repeat(3,1fr);margin-top:0}.onter-project-card{overflow:hidden;border-radius:16px;background:#fff;box-shadow:0 10px 32px rgba(18,54,90,.08)}.onter-project-card>a{display:block;overflow:hidden;aspect-ratio:16/9;background:#e8eef1}.onter-project-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}.onter-project-card:hover img{transform:scale(1.025)}.onter-project-card>div{padding:18px 20px}.onter-project-card p{margin:0 0 5px;color:#008fc7;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.onter-project-card h2,.onter-project-card h3{margin:0;color:#162441;font-size:1.22rem}.onter-project-card>div>span{display:-webkit-box;min-height:3.4em;margin-top:8px;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.onter-project-card .onter-tags{margin-top:14px}
.onter-price-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}.onter-price-preview article{padding:25px;border-top:3px solid #00aeef;border-radius:12px;background:#f6fafc}.onter-price-preview article.is-featured{border-color:#00b848}.onter-price-preview span,.onter-price-preview strong{display:block}.onter-price-preview span{color:#008fc7;font-size:12px;font-weight:700}.onter-price-preview strong{margin:7px 0;color:#162441;font-size:1.7rem}
.onter-post-card{display:flex;flex-direction:column;height:100%}.onter-post-card__body{display:flex;flex:1;flex-direction:column}.onter-post-card h3{display:-webkit-box;min-height:3.1em;overflow:hidden;font-size:clamp(1.25rem,1.6vw,1.4rem);line-height:1.42;-webkit-box-orient:vertical;-webkit-line-clamp:2}.onter-post-card h3 a{color:#162441;text-decoration:none}.onter-post-card h3 a:hover{color:#008fc7}.onter-post-card__body>p:last-child{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.onter-blog-feature h2 a,.onter-related h3 a{color:inherit;text-decoration:none}
.onter-pricing-grid{align-items:stretch}.onter-price-card{display:flex;flex-direction:column;padding:30px}.onter-price-card.is-featured{border:1px solid rgba(0,184,72,.4);box-shadow:0 16px 45px rgba(0,129,68,.12);transform:none}.onter-price-card__desc{min-height:3.2em;color:#6d7989}.onter-price-card__amount{padding:16px 0;border-top:1px solid #e1e8ec;border-bottom:1px solid #e1e8ec}.onter-price-card ul{flex:1}.onter-price-card li{margin:9px 0}.onter-price-card__badge{top:16px;right:16px;background:#e9f8ef;color:#087b3a}.onter-price{font-size:1.95rem}
.onter-modal__dialog{width:min(calc(100% - 40px),560px);max-height:90vh;padding:30px;border-radius:20px}.onter-modal__dialog h2{padding-right:46px;font-size:2rem}.onter-modal__close{top:16px;right:16px;width:38px;height:38px;display:grid;place-items:center;padding:0;border-radius:50%;font-size:24px;line-height:1}.onter-modal__close:hover{background:#dfe9ee}.onter-modal__intro{margin-bottom:18px}.onter-modal__dialog .onter-form{gap:12px}.onter-modal__dialog textarea{min-height:88px}.onter-modal__dialog .onter-field label{margin-bottom:3px}.onter-modal__dialog .onter-consent{font-size:12px}.onter-modal__dialog .onter-form__hint{display:none}.onter-modal__dialog .onter-btn{width:100%}
@media(max-width:1100px){.onter-project-grid{grid-template-columns:repeat(2,1fr)}.onter-service-split{grid-template-columns:1fr 1.4fr;gap:38px}.onter-website-feature{gap:38px}}
@media(max-width:900px){.onter-hero--phase4 .onter-hero__grid{min-height:auto}.onter-hero-sites{min-height:440px;margin-bottom:45px}.onter-service-split,.onter-website-feature{grid-template-columns:1fr}.onter-service-split.is-reverse>div:first-child{order:0}.onter-service-split{gap:22px}.onter-site-collage{min-height:430px}.onter-project-grid--archive{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.onter-hero h1{font-size:clamp(2.25rem,10vw,2.5rem)}.onter-section h2{font-size:clamp(1.85rem,8vw,2.15rem)}.onter-problem-list{grid-template-columns:1fr}.onter-hero-sites{min-height:360px}.onter-browser-frame{inset:12px 14px 50px 0}.onter-phone-frame{width:128px}.onter-visual{min-height:280px;padding:15px}.onter-visual--agent{grid-template-columns:1fr}.onter-visual--agent aside{display:none}.onter-kanban{overflow-x:auto}.onter-kanban section{min-width:150px}.onter-kpis{grid-template-columns:1fr 1fr}.onter-kpis span:last-child{display:none}.onter-bars{height:125px}.onter-site-collage{min-height:330px}.onter-project-grid,.onter-project-grid--archive,.onter-price-preview{grid-template-columns:1fr}.onter-section-heading{align-items:start;flex-direction:column}.onter-modal{align-items:center;padding:12px}.onter-modal__dialog{width:calc(100% - 24px);max-height:90vh;padding:20px;border-radius:18px}.onter-modal__dialog h2{font-size:1.7rem}.onter-modal__dialog .onter-form{grid-template-columns:1fr}.onter-modal__dialog .onter-field--full{grid-column:auto}.onter-price-card{padding:24px}}

/* Phase 5 — focused Hero, Website showcase and complete authentic portfolio */
.onter-ai-control{overflow:hidden;border:1px solid #cfdce5;border-radius:22px;background:#fff;box-shadow:0 30px 70px rgba(18,54,90,.17)}
.onter-ai-control__bar{display:flex;align-items:center;gap:12px;height:46px;padding:0 18px;border-bottom:1px solid #dce6ec;background:#f8fbfd;color:#15233e}
.onter-ai-control__bar>span{display:flex;gap:5px}.onter-ai-control__bar i{display:block;width:7px;height:7px;border-radius:50%;background:#b9c7cf}.onter-ai-control__bar i:first-child{background:#ff836c}.onter-ai-control__bar i:nth-child(2){background:#ffc857}.onter-ai-control__bar i:last-child{background:#65d68c}
.onter-ai-control__bar b{font-size:13px}.onter-ai-control__bar small{margin-left:auto;padding:4px 8px;border-radius:6px;background:#eaf7ee;color:#24804b;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.onter-ai-control__body{display:grid;grid-template-columns:130px 1fr;min-height:460px}.onter-ai-control__nav{display:flex;flex-direction:column;gap:7px;padding:22px 14px;border-right:1px solid #dce6ec;background:#142442;color:#b9c6d7}.onter-ai-control__nav strong{margin:0 8px 15px;color:#fff;font-size:13px}.onter-ai-control__nav span{padding:9px 10px;border-radius:8px;font-size:11px}.onter-ai-control__nav .is-active{background:#00aeef;color:#fff;font-weight:700}
.onter-ai-control__body>main{min-width:0;padding:22px;background:#f4f8fb}.onter-control-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.onter-control-heading div{display:grid;gap:2px}.onter-control-heading small{color:#718094;font-size:10px}.onter-control-heading strong{color:#15233e;font-size:17px}.onter-control-heading em{padding:5px 9px;border-radius:999px;background:#e8f7ed;color:#24804b;font-size:9px;font-style:normal;font-weight:700}
.onter-control-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.onter-control-kpis span{display:grid;gap:2px;padding:12px;border:1px solid #e1e9ee;border-radius:10px;background:#fff}.onter-control-kpis small{color:#718094;font-size:9px}.onter-control-kpis b{color:#15233e;font-size:20px}.onter-control-kpis i{color:#00a845;font-size:8px;font-style:normal}
.onter-control-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:10px;margin-top:10px}.onter-control-grid section,.onter-control-crm{border:1px solid #e1e9ee;border-radius:11px;background:#fff}.onter-control-grid header,.onter-control-crm header{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;border-bottom:1px solid #edf2f5}.onter-control-grid header b,.onter-control-crm header b{color:#15233e;font-size:11px}.onter-control-grid header small,.onter-control-crm header small{color:#718094;font-size:8px}
.onter-control-chart>div{display:flex;align-items:end;gap:8px;height:86px;padding:16px 14px 3px}.onter-control-chart>div i{flex:1;min-width:5px;border-radius:5px 5px 2px 2px;background:#00aeef}.onter-control-chart footer{display:flex;justify-content:space-between;padding:5px 13px 10px;color:#8290a0;font-size:7px}
.onter-control-chat{padding-bottom:10px}.onter-control-chat p{max-width:88%;margin:9px 10px 0;padding:8px 10px;border-radius:9px;font-size:8px;line-height:1.45}.onter-control-chat .is-user{margin-left:auto;background:#e8f5fb;color:#1c4962}.onter-control-chat .is-ai{background:#eef8f1;color:#24543a}
.onter-control-crm{margin-top:10px}.onter-control-crm>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}.onter-control-crm span{display:grid;gap:2px;padding:8px;border-radius:8px;background:#f5f8fa}.onter-control-crm i{color:#008fc7;font-size:7px;font-style:normal;font-weight:700;text-transform:uppercase}.onter-control-crm b{color:#15233e;font-size:9px}.onter-control-crm small{color:#718094;font-size:7px}
.onter-website-showcase{position:relative;min-height:500px}.onter-website-browser{position:absolute;inset:28px 24px 45px 0;overflow:hidden;margin:0;padding-top:30px;border:1px solid #cfdee6;border-radius:18px;background:#fff;box-shadow:0 28px 60px rgba(18,54,90,.16)}.onter-website-browser>span{position:absolute;top:12px;width:7px;height:7px;border-radius:50%;background:#d7e1e7}.onter-website-browser>span:first-child{left:15px;background:#ff836c}.onter-website-browser>span:nth-child(2){left:28px;background:#ffc857}.onter-website-browser>span:nth-child(3){left:41px;background:#65d68c}.onter-website-browser img{display:block;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top;border-radius:0 0 17px 17px}.onter-website-phone{position:absolute;right:0;bottom:18px;width:165px;overflow:hidden;margin:0;padding:7px;border:7px solid #15233e;border-radius:24px;background:#fff;box-shadow:0 22px 46px rgba(13,42,74,.22)}.onter-website-phone img{display:block;width:100%;aspect-ratio:390/694;object-fit:cover;object-position:top;border-radius:11px}.onter-website-showcase>p{position:absolute;left:18px;bottom:7px;margin:0;color:#627083;font-size:12px;font-weight:600}
.onter-project-group-heading{max-width:790px;margin-bottom:32px}.onter-project-group-heading h2{margin-bottom:12px}.onter-project-group-heading .onter-lead{max-width:760px}.onter-project-card h3 a{color:inherit;text-decoration:none}.onter-project-card h3 a:hover{color:#008fc7}
@media(max-width:1100px){.onter-ai-control__body{grid-template-columns:105px 1fr}.onter-ai-control__nav{padding:18px 10px}.onter-control-grid{grid-template-columns:1fr}.onter-control-chat{display:none}}
@media(max-width:900px){.onter-ai-control{margin:15px 0 55px}.onter-ai-control__body{min-height:430px}.onter-website-showcase{min-height:480px;margin-top:10px}}
@media(max-width:700px){.onter-ai-control{border-radius:16px}.onter-ai-control__bar{height:40px;padding:0 12px}.onter-ai-control__bar b{font-size:11px}.onter-ai-control__body{grid-template-columns:1fr;min-height:auto}.onter-ai-control__nav{display:none}.onter-ai-control__body>main{padding:14px 12px}.onter-control-heading strong{font-size:14px}.onter-control-kpis{gap:6px}.onter-control-kpis span{padding:9px}.onter-control-kpis b{font-size:16px}.onter-control-grid{grid-template-columns:1fr}.onter-control-chart{display:none}.onter-control-chat{display:block}.onter-control-crm>div{gap:5px;padding:7px}.onter-control-crm span{padding:6px}.onter-website-showcase{min-height:340px}.onter-website-browser{inset:8px 14px 42px 0;padding-top:25px;border-radius:13px}.onter-website-phone{right:0;bottom:15px;width:112px;border-width:5px;border-radius:17px}.onter-website-showcase>p{left:8px;bottom:5px;font-size:10px}}

/* Phase 5.1 — authentic product composition, NOXH showcase and portfolio filters */
.onter-product-composition{position:relative;min-width:0;min-height:530px;isolation:isolate}
.onter-product-composition:before{position:absolute;inset:5% 3% 6%;z-index:-1;border-radius:50%;background:radial-gradient(circle,rgba(0,174,239,.12),rgba(0,184,72,.05) 48%,transparent 72%);content:""}
.onter-product-ui{position:absolute;overflow:hidden;margin:0;border:1px solid #cad9e3;border-radius:16px;background:#fff;box-shadow:0 24px 58px rgba(18,54,90,.18)}
.onter-product-ui figcaption{height:40px;display:flex;align-items:center;gap:8px;padding:0 13px;border-bottom:1px solid #e2eaee;background:#f8fbfd;color:#162441}
.onter-product-ui figcaption:before{width:8px;height:8px;border-radius:50%;background:#00b848;box-shadow:14px 0 #ffc857,28px 0 #ff836c;content:""}
.onter-product-ui figcaption span{margin-left:32px;color:#008fc7;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.onter-product-ui figcaption b{margin-left:auto;font-size:11px}
.onter-product-ui img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top}
.onter-product-ui--dashboard{top:18px;left:0;width:54%;z-index:1;transform:rotate(-2.2deg)}
.onter-product-ui--website{top:64px;right:0;width:48%;z-index:2;transform:rotate(2deg)}
.onter-product-ui--agent{top:152px;left:8%;width:78%;z-index:3}
.onter-product-crm{position:absolute;right:1%;bottom:12px;width:56%;z-index:4;padding:14px 16px;border:1px solid #d3e0e7;border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 18px 42px rgba(18,54,90,.18);backdrop-filter:blur(8px)}
.onter-product-crm>div{display:flex;align-items:center;gap:8px}.onter-product-crm>div span{color:#008fc7;font-size:10px;font-weight:800;letter-spacing:.08em}.onter-product-crm>div b{color:#162441;font-size:12px}.onter-product-crm>div i{margin-left:auto;color:#17834a;font-size:9px;font-style:normal}
.onter-product-crm ol{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0 0;padding:0;list-style:none}.onter-product-crm li{display:grid;padding:8px;border-radius:8px;background:#f2f7f9}.onter-product-crm small{color:#6f7d8e;font-size:8px}.onter-product-crm strong{color:#162441;font-size:15px}
.onter-project-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}.onter-project-filters button{min-height:40px;padding:8px 14px;border:1px solid var(--onter-border);border-radius:999px;background:#fff;color:#445266;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer}.onter-project-filters button:hover,.onter-project-filters button.is-active{border-color:var(--onter-primary);background:var(--onter-primary);color:#fff}
.onter-project-subgroup+.onter-project-subgroup{margin-top:58px}.onter-project-subgroup[hidden]{display:none}.onter-project-subgroup__heading{max-width:760px;margin-bottom:24px}.onter-project-subgroup__heading h3{font-size:clamp(1.55rem,2.4vw,2rem)}.onter-project-subgroup__heading>p:last-child{margin:0;color:#69778a}.onter-project-card[hidden]{display:none}.onter-project-more{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:38px}.onter-project-more p{margin:0;color:#69778a;font-size:13px}.onter-project-more [hidden]{display:none}
@media(max-width:1100px){.onter-product-composition{min-height:500px}.onter-product-ui--agent{top:145px;width:82%}.onter-product-crm{width:60%}}
@media(max-width:900px){.onter-product-composition{min-height:500px;margin:10px 0 50px}.onter-product-ui--dashboard{width:48%}.onter-product-ui--website{width:43%}.onter-product-ui--agent{left:10%;width:72%}.onter-product-crm{right:8%;width:48%}}
@media(max-width:700px){.onter-product-composition{min-height:365px;margin:5px 0 38px}.onter-product-composition:before{inset:0}.onter-product-ui{border-radius:11px}.onter-product-ui figcaption{height:29px;padding:0 8px}.onter-product-ui figcaption:before{width:6px;height:6px;box-shadow:10px 0 #ffc857,20px 0 #ff836c}.onter-product-ui figcaption span{margin-left:22px;font-size:8px}.onter-product-ui figcaption b{font-size:8px}.onter-product-ui--dashboard{display:none}.onter-product-ui--website{top:5px;right:0;width:50%;transform:rotate(1.5deg)}.onter-product-ui--agent{top:72px;left:0;width:92%}.onter-product-crm{right:0;bottom:3px;width:66%;padding:9px 10px}.onter-product-crm>div b{font-size:10px}.onter-product-crm>div i{display:none}.onter-product-crm ol{gap:4px;margin-top:7px}.onter-product-crm li{padding:5px}.onter-product-crm strong{font-size:12px}.onter-project-filters{overflow-x:auto;flex-wrap:nowrap;margin-right:-20px;margin-left:-20px;padding:0 20px 10px;scrollbar-width:none}.onter-project-filters::-webkit-scrollbar{display:none}.onter-project-more{flex-direction:column;gap:10px}.onter-project-more .onter-btn{width:100%}}

/* Production article refinements */
.onter-breadcrumbs{min-width:0;align-items:center;flex-wrap:nowrap;text-align:left}
.onter-breadcrumbs a,.onter-breadcrumbs>span[aria-hidden="true"]{flex:0 0 auto}
.onter-breadcrumbs>span[aria-current="page"]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onter-article-header .onter-breadcrumbs{justify-content:flex-start}
.onter-toc{border:1px solid #dbe6eb;border-left:3px solid var(--onter-primary);border-radius:12px;background:#fff}
.onter-toc summary{display:flex;align-items:center;gap:10px;justify-content:space-between;cursor:pointer;list-style:none;color:var(--onter-heading);font-weight:700}
.onter-toc summary::-webkit-details-marker{display:none}
.onter-toc summary:after{content:"+";font-size:20px;line-height:1}
.onter-toc[open] summary:after{content:"−"}
.onter-toc nav{margin-top:14px;padding-top:8px;border-top:1px solid #e6edf1}
.onter-toc__closed,.onter-toc__open{margin-left:auto;color:var(--onter-primary);font-size:12px;font-weight:600}
.onter-toc__open{display:none}
.onter-toc[open] .onter-toc__closed{display:none}
.onter-toc[open] .onter-toc__open{display:inline}
@media(max-width:700px){.onter-page-hero{padding-top:42px}.onter-breadcrumbs{margin-bottom:14px;font-size:12px}.onter-article-deck{font-size:1rem;line-height:1.65}.onter-toc{padding:15px 16px}}