/* ============================================================================
   OpenFace — Design System (redesign 2026)
   Source of truth: "Дизайн безопасной сделки" (Claude Design handoff)
   Two scopes:
     :root            — app (PWA) palette & tokens
     .of-landing      — public landing palette overrides
   Fonts: Onest (headings/numbers) + Golos Text (UI text)
   ========================================================================== */

:root {
  /* — surfaces — */
  --of-bg: #F2F5F8;
  --of-surface: #FFFFFF;
  --of-divider: #EDF1F5;
  --of-header-border: #E9EEF3;
  --of-input-border: #E2E9EF;
  --of-grey-field: #F1F5F8;
  --of-segment-bg: #E7EDF2;
  --of-toggle-off: #DCE5EC;

  /* — text — */
  --of-text: #0F1E2B;
  --of-text-2: #5D6F7E;
  --of-text-3: #8798A6;
  --of-muted: #93A3B2;
  --of-check-text: #33475A;
  --of-tab-idle: #67798A;

  /* — brand — */
  --of-primary: #0B7DC4;
  --of-primary-tint: #E7F3FC;
  --of-primary-dark: #0A6FAC;
  --of-info-bg: #EFF7FD;

  /* — semantic — */
  --of-success: #128A56;
  --of-success-bg: #E4F5EC;
  --of-amber: #C77A08;
  --of-amber-chip: #B36D07;
  --of-amber-dot: #E8960C;
  --of-amber-bg: #FCF2E0;
  --of-danger: #C4322F;
  --of-danger-2: #C43D3D;
  --of-danger-bg: #FBEAEC;
  --of-pro: #B78814;
  --of-pro-bg: #FBF4E0;

  /* — deal types — */
  --of-type-service: #0B7DC4;      --of-type-service-bg: #E7F3FC;
  --of-type-sale: #6E56CF;         --of-type-sale-bg: #EEEBFB;
  --of-type-rent: #0D9080;         --of-type-rent-bg: #E4F5F2;

  /* — overlays — */
  --of-overlay: rgba(15,30,43,.45);
  --of-toast-bg: #0F1E2B;

  /* — radii — */
  --of-r-card: 18px;
  --of-r-row: 16px;
  --of-r-cta: 14px;
  --of-r-input: 13px;
  --of-r-tile: 12px;
  --of-r-chip: 8px;
  --of-r-sheet: 24px;

  /* — shadows — */
  --of-sh-card: 0 1px 2px rgba(15,30,43,.04);
  --of-sh-cta: 0 8px 18px -8px rgba(11,125,196,.6);
  --of-sh-toast: 0 12px 28px -8px rgba(15,30,43,.5);
  --of-sh-segment: 0 1px 3px rgba(15,30,43,.08);

  /* — fonts — */
  --of-font: 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* 'Golos Text' — фолбэк для казахских глифов (ә, ғ, қ, ң, ө, ұ, ү, һ), которых нет в Onest */
  --of-font-head: 'Onest', 'Golos Text', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------------------------------------------------------------- reset --- */
html, body { margin: 0; padding: 0; }
.of *, .of *::before, .of *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.of { font-family: var(--of-font); color: var(--of-text); -webkit-font-smoothing: antialiased; }
.of h1,.of h2,.of h3,.of h4,.of p { margin: 0; }
.of a { color: inherit; text-decoration: none; }
.of input, .of textarea, .of button { font-family: var(--of-font); }
.of img { max-width: 100%; }

/* ================================================================ PWA app == */
/* Phone-shaped container, centered on desktop, full-bleed on mobile. */
.of-app-wrap {
  display: flex; justify-content: center; min-height: 100dvh; background: #DFE5EA;
}
.of-app {
  width: 100%; max-width: 430px; height: 100dvh;
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  background: var(--of-bg); color: var(--of-text);
  box-shadow: 0 0 44px rgba(15,30,43,.18);
}
/* Screens without an inner .of-scroll (auth) must be able to scroll themselves
   so tall content is never clipped by the fixed-height shell. */
.of-app--scroll { overflow-y: auto; }
@media (max-width: 460px) { .of-app { box-shadow: none; } .of-app-wrap { background: var(--of-bg); } }

/* scrollable body between header and (optional) tab bar */
.of-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
.of-screen { min-height: 100%; display: flex; flex-direction: column; animation: of-screen-in .22s ease; }

@keyframes of-screen-in { from { opacity: 0; transform: translateY(10px);} to { opacity:1; transform:translateY(0);} }
@keyframes of-toast-in  { from { opacity: 0; transform: translateY(-14px);} to { opacity:1; transform:translateY(0);} }
@keyframes of-sheet-in  { from { transform: translateY(60px); opacity:0;} to { transform: translateY(0); opacity:1;} }
@keyframes of-dim-in    { from { opacity: 0;} to { opacity:1;} }
@keyframes of-shake     { 10%,90%{transform:translateX(-1px)} 20%,80%{transform:translateX(2px)} 30%,50%,70%{transform:translateX(-4px)} 40%,60%{transform:translateX(4px)} }

/* --------------------------------------------------------------- headers --- */
.of-header {
  background: var(--of-surface); border-bottom: 1px solid var(--of-header-border);
  padding: calc(18px + env(safe-area-inset-top)) 20px 14px;
}
.of-header--sub { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: 12px; }
.of-header-row { display: flex; align-items: center; gap: 12px; }
.of-title { font-family: var(--of-font-head); font-weight: 800; font-size: 26px; letter-spacing: -.02em; }
.of-title--sub { font-size: 18px; }
.of-subtitle { font-size: 12.5px; color: var(--of-text-3); margin-top: 1px; }

.of-back {
  width: 36px; height: 36px; border-radius: 50%; background: var(--of-grey-field);
  display: grid; place-items: center; flex: none; cursor: pointer; border: none;
}

/* balance chip */
.of-balance-chip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--of-grey-field);
  border-radius: 20px; padding: 8px 13px; cursor: pointer; border: none;
}
.of-balance-chip .coin {
  width: 16px; height: 16px; border-radius: 50%; background: var(--of-primary);
  display: grid; place-items: center; color: #fff; font-family: var(--of-font-head); font-weight: 700; font-size: 10px;
}
.of-balance-chip .amt { font-family: var(--of-font-head); font-weight: 700; font-size: 14px; }

/* --------------------------------------------------------------- overline --- */
.of-overline {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--of-muted); text-transform: uppercase;
}

/* ---------------------------------------------------------------- cards --- */
.of-card {
  background: var(--of-surface); border-radius: var(--of-r-card); box-shadow: var(--of-sh-card);
}
.of-card--pad { padding: 18px; }
.of-list { margin: 12px 20px 16px; overflow: hidden; }
.of-divider { height: 1px; background: var(--of-divider); }
.of-divider--inset { margin-left: 70px; }

/* generic list row */
.of-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; cursor: pointer; }
.of-row .lead {
  width: 42px; height: 42px; border-radius: var(--of-r-tile); display: grid; place-items: center; flex: none;
  font-family: var(--of-font-head); font-weight: 800; font-size: 16px;
}
.of-row .body { flex: 1; min-width: 0; }
.of-row .ttl { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-row .sub { font-size: 12.5px; color: var(--of-text-3); margin-top: 2px; }
.of-row .tail { text-align: right; flex: none; }
.of-row .amount { font-family: var(--of-font-head); font-weight: 700; font-size: 15px; }
.of-row .rowstatus { font-size: 12px; font-weight: 600; margin-top: 2px; }

/* key/value fact row */
.of-fact { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; }
.of-fact .k { font-size: 14px; color: var(--of-text-2); }
.of-fact .v { font-size: 14px; font-weight: 700; }

/* ---------------------------------------------------------------- buttons --- */
.of-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-size: 15px; font-weight: 700; border-radius: var(--of-r-cta);
  padding: 15px 20px; text-align: center; line-height: 1;
}
.of-btn--block { width: 100%; }
.of-btn--primary { background: var(--of-primary); color: #fff; box-shadow: var(--of-sh-cta); }
.of-btn--primary:disabled, .of-btn--primary.is-disabled { background: #B8CEDD; box-shadow: none; cursor: not-allowed; }
.of-btn--secondary { background: var(--of-surface); color: var(--of-text); box-shadow: var(--of-sh-card); font-size: 13.5px; }
.of-btn--grey { background: var(--of-grey-field); color: var(--of-text); }
.of-btn--danger-soft { background: var(--of-danger-bg); color: var(--of-danger); }
.of-btn--danger { background: var(--of-danger); color: #fff; }
.of-btn--sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; box-shadow: none; }
.of-textlink-danger { text-align: center; font-size: 13px; font-weight: 600; color: var(--of-danger-2); cursor: pointer; }

/* --------------------------------------------------------------- chips ----- */
.of-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--of-r-chip);
  padding: 6px 10px; font-size: 12px; font-weight: 700;
}
.of-chip .dot { width: 6px; height: 6px; border-radius: 50%; }
.of-chip--pro { background: var(--of-pro-bg); color: var(--of-pro); }
.of-chip--verified { background: var(--of-success-bg); color: var(--of-success); font-size: 11.5px; }
/* status chip variants set bg/color inline or via modifier */
.of-chip--success { background: var(--of-success-bg); color: var(--of-success); }
.of-chip--amber { background: var(--of-amber-bg); color: var(--of-amber-chip); }
.of-chip--info { background: var(--of-primary-tint); color: var(--of-primary-dark); }
.of-chip--grey { background: #F0F3F6; color: var(--of-tab-idle); }
.of-chip--danger { background: var(--of-danger-bg); color: var(--of-danger); }

/* status as plain colored text (bank density, used in deal list) */
.of-status-text { font-size: 12px; font-weight: 600; }

/* --------------------------------------------------------- segment control - */
.of-segment { display: flex; background: var(--of-segment-bg); border-radius: 12px; padding: 3px; }
.of-segment > * {
  flex: 1; text-align: center; padding: 8px 0; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: var(--of-tab-idle); background: transparent; border: none; cursor: pointer; transition: background .18s;
}
.of-segment > .is-active { background: #fff; color: var(--of-text); font-weight: 700; box-shadow: var(--of-sh-segment); }

/* role chips (2 up) */
.of-role-row { display: flex; gap: 8px; }
.of-role {
  flex: 1; text-align: center; padding: 11px 0; border-radius: 12px; background: #fff;
  border: 1.5px solid var(--of-input-border); font-size: 13.5px; font-weight: 600; color: var(--of-tab-idle); cursor: pointer;
}
.of-role.is-active { background: var(--of-primary-tint); border-color: var(--of-primary); color: var(--of-primary); font-weight: 700; }

/* --------------------------------------------------------------- inputs ---- */
.of-field-label { font-size: 12.5px; font-weight: 700; color: var(--of-text-2); margin-bottom: 7px; }
.of-input-wrap {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1.5px solid var(--of-input-border); border-radius: var(--of-r-input); padding: 3px 15px; transition: border-color .15s, box-shadow .15s;
}
.of-input-wrap:focus-within { border-color: var(--of-primary); box-shadow: 0 0 0 3px rgba(11,125,196,.1); }
.of-input-wrap input {
  flex: 1; border: none; outline: none; font-size: 15px; font-weight: 600; padding: 10px 0; background: transparent; color: var(--of-text);
}
.of-input-wrap .prefix { font-family: var(--of-font-head); font-size: 16px; font-weight: 700; line-height: 1; color: var(--of-text-3); padding-right: 10px; border-right: 1px solid var(--of-input-border); }
.of-input-wrap .suffix { font-size: 14px; font-weight: 700; color: var(--of-text-3); }
.of-input-wrap.is-amount input { font-family: var(--of-font-head); font-size: 16px; font-weight: 700; }
.of-textarea {
  width: 100%; border: 1.5px solid var(--of-input-border); border-radius: var(--of-r-input);
  padding: 13px 15px; font-size: 15px; line-height: 1.5; min-height: 84px; outline: none; resize: none; background: #fff; color: var(--of-text);
}
.of-textarea:focus { border-color: var(--of-primary); box-shadow: 0 0 0 3px rgba(11,125,196,.1); }

/* info hint (rhombus + text) */
.of-hint {
  display: flex; align-items: center; gap: 8px; background: var(--of-info-bg); border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; font-weight: 600; color: var(--of-primary-dark);
}
.of-hint .rhombus { width: 10px; height: 10px; background: var(--of-primary); transform: rotate(45deg); border-radius: 2.5px; flex: none; }
.of-note-shield { display: flex; align-items: flex-start; gap: 10px; background: var(--of-info-bg); border-radius: 14px; padding: 13px 15px; font-size: 13px; line-height: 1.5; color: var(--of-primary-dark); }

/* --------------------------------------------------------------- toggles --- */
.of-toggle { width: 44px; height: 26px; border-radius: 13px; background: var(--of-toggle-off); position: relative; transition: background .18s; flex: none; cursor: pointer; }
.of-toggle .knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .18s; }
.of-toggle.is-on { background: var(--of-primary); }
.of-toggle.is-on .knob { left: 21px; }

/* checkbox (consents) */
.of-check { width: 22px; height: 22px; border-radius: 7px; background: #fff; border: 2px solid #CBD8E2; flex: none; display: grid; place-items: center; cursor: pointer; }
.of-check.is-on { background: var(--of-primary); border-color: var(--of-primary); }
.of-check svg { opacity: 0; }
.of-check.is-on svg { opacity: 1; }

/* --------------------------------------------------------- avatars/tiles --- */
.of-avatar { border-radius: 50%; display: grid; place-items: center; font-family: var(--of-font-head); font-weight: 700; flex: none; }
.of-avatar--you { background: var(--of-primary); color: #fff; }
.of-avatar--them { background: var(--of-segment-bg); color: var(--of-tab-idle); }

/* --------------------------------------------------------------- timeline -- */
.of-timeline .step { display: flex; gap: 12px; }
.of-timeline .rail { display: flex; flex-direction: column; align-items: center; }
.of-timeline .node { position: relative; width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid var(--of-toggle-off); background: #fff; }
.of-timeline .node svg { position: absolute; left: 3.5px; top: 3.5px; opacity: 0; }
.of-timeline .node .inner { position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--of-amber-dot); opacity: 0; }
.of-timeline .line { flex: 1; width: 2px; background: var(--of-input-border); }
.of-timeline .content { padding-bottom: 16px; }
.of-timeline .step-label { font-size: 13.5px; font-weight: 600; color: var(--of-muted); }
.of-timeline .step-sub { font-size: 12px; color: var(--of-text-3); margin-top: 1px; }
.of-timeline .step.is-done .node { background: var(--of-success); border-color: var(--of-success); }
.of-timeline .step.is-done .node svg { opacity: 1; }
.of-timeline .step.is-done .step-label { color: var(--of-text); }
.of-timeline .step.is-done .line { background: var(--of-success); }
.of-timeline .step.is-current .node { border-color: var(--of-amber-dot); }
.of-timeline .step.is-current .node .inner { opacity: 1; }
.of-timeline .step.is-current .step-label { color: var(--of-amber-chip); font-weight: 700; }

/* --------------------------------------------------------------- sticky CTA */
.of-sticky {
  margin-top: auto; position: sticky; bottom: 0; z-index: 5;
  background: rgba(242,245,248,.96); backdrop-filter: blur(14px);
  padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 10px;
}

/* step progress (3 segments) */
.of-progress { display: flex; gap: 5px; margin-top: 12px; }
.of-progress > span { flex: 1; height: 4px; border-radius: 2px; background: var(--of-input-border); }
.of-progress > span.is-on { background: var(--of-primary); }

/* --------------------------------------------------------------- tab bar --- */
.of-tabbar {
  flex: none; background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-top: 1px solid var(--of-header-border);
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 10px 8px calc(10px + env(safe-area-inset-bottom));
}
.of-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--of-muted); cursor: pointer; position: relative; background: none; border: none; }
.of-tab .lbl { font-size: 11px; font-weight: 700; }
.of-tab.is-active { color: var(--of-primary); }
.of-tab-badge { position: absolute; top: -3px; right: 28%; min-width: 17px; height: 17px; border-radius: 9px; background: var(--of-danger-2); color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; }
.of-tab-create { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: -24px; cursor: pointer; }
.of-tab-create .fab { width: 50px; height: 50px; border-radius: 50%; background: var(--of-primary); border: 4px solid var(--of-bg); display: grid; place-items: center; box-shadow: 0 8px 18px -6px rgba(11,125,196,.6); }
.of-tab-create .lbl { font-size: 11px; font-weight: 700; color: var(--of-primary); }

/* ---------------------------------------------------------------- toasts --- */
.of-toast-host { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.of-toast {
  width: min(100%, 430px); box-sizing: border-box;
  margin: calc(14px + env(safe-area-inset-top)) 16px 0;
  display: flex; align-items: center; gap: 10px; background: var(--of-toast-bg); color: #fff;
  border-radius: 14px; padding: 13px 16px; box-shadow: var(--of-sh-toast); animation: of-toast-in .25s ease; pointer-events: auto;
}
.of-toast .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.of-toast .ic--ok { background: var(--of-success); }
.of-toast .ic--err { background: var(--of-danger); color: #fff; font-weight: 800; font-size: 13px; }
.of-toast .msg { font-size: 13.5px; font-weight: 600; line-height: 1.35; flex: 1; }
.of-toast .x { color: rgba(255,255,255,.55); cursor: pointer; flex: none; }

/* --------------------------------------------------------- sheets/dialogs -- */
.of-overlay-dim { position: fixed; inset: 0; z-index: 150; background: var(--of-overlay); animation: of-dim-in .2s ease; }
.of-sheet-anchor { position: absolute; inset: 0; z-index: 150; background: var(--of-overlay); display: flex; flex-direction: column; justify-content: flex-end; animation: of-dim-in .2s ease; }
.of-sheet { background: #fff; border-radius: var(--of-r-sheet) var(--of-r-sheet) 0 0; padding: 24px 20px calc(24px + env(safe-area-inset-bottom)); animation: of-sheet-in .25s ease; }
.of-sheet .handle { width: 40px; height: 4px; border-radius: 2px; background: var(--of-toggle-off); margin: 0 auto 18px; }
.of-sheet .sheet-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; }
.of-sheet .sheet-title { font-family: var(--of-font-head); font-weight: 800; font-size: 19px; text-align: center; margin-top: 14px; }
.of-sheet .sheet-text { font-size: 13.5px; line-height: 1.5; color: var(--of-text-2); text-align: center; margin-top: 6px; }
.of-sheet .sheet-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.of-sheet .of-btn { box-shadow: none; }

/* center dialog (irreversible) */
.of-dialog-anchor { position: absolute; inset: 0; z-index: 160; background: var(--of-overlay); display: grid; place-items: center; padding: 24px; animation: of-dim-in .2s ease; }
.of-dialog { width: 290px; max-width: 100%; background: #fff; border-radius: 20px; padding: 22px 20px; box-shadow: 0 24px 50px -18px rgba(15,30,43,.4); animation: of-sheet-in .25s ease; }
.of-dialog .dlg-ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; }
.of-dialog .dlg-title { font-family: var(--of-font-head); font-weight: 800; font-size: 17px; text-align: center; margin-top: 12px; }
.of-dialog .dlg-text { font-size: 13px; line-height: 1.5; color: var(--of-text-2); text-align: center; margin-top: 5px; }
.of-dialog .dlg-actions { display: flex; gap: 8px; margin-top: 16px; }
.of-dialog .of-btn { flex: 1; box-shadow: none; padding: 12px 0; font-size: 13.5px; border-radius: 12px; }

/* chat bubbles */
.of-bubble { max-width: 78%; border-radius: 16px 16px 16px 6px; padding: 10px 14px; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 2px rgba(15,30,43,.05); background: #fff; color: var(--of-text); }
.of-bubble--mine { background: var(--of-primary); color: #fff; border-radius: 16px 16px 6px 16px; }
.of-bubble-row { display: flex; }
.of-bubble-row--mine { justify-content: flex-end; }

.of-hidden { display: none !important; }

/* --------------------------------------------------------- skeletons ------ */
@keyframes of-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
.of-skel {
  position: relative; background: #EAEFF4;
  background-image: linear-gradient(90deg, #EAEFF4 0px, #F4F8FB 210px, #EAEFF4 420px);
  background-size: 840px 100%; animation: of-shimmer 1.25s linear infinite; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) { .of-skel { animation: none; } }
.of-skel-line { height: 12px; border-radius: 6px; }
.of-skel-line.sm { height: 10px; border-radius: 5px; }
.of-skel-line.lg { height: 16px; border-radius: 7px; }
.of-skel-circle { border-radius: 50%; }
.of-skel-tile { border-radius: 12px; }
.of-skel-chip { height: 20px; width: 72px; border-radius: 8px; }
/* a standard list-row skeleton (42px tile + two lines + tail) */
.of-skel-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.of-skel-row .s-tile { width: 42px; height: 42px; flex: none; }
.of-skel-row .s-body { flex: 1; }
.of-skel-row .s-tail { width: 54px; flex: none; }

/* ============================================================== LANDING ==== */
.of-landing {
  --of-brand: #12A3E0;
  --of-brand-2: #0B7FC0;
  --of-brand-grad: linear-gradient(135deg,#17ABEC,#0B7FC0);
  --of-l-text: #16222E;
  --of-l-text-2: #5A6B7A;
  --of-l-text-3: #6B7B89;
  --of-l-bg: #FAFCFD;
  --of-l-tint: #EAF5FC;
  --of-l-green: #17B26A;
  --of-l-green-tint: #E7F6EF;
  --of-l-green-text: #0F7A52;
  font-family: var(--of-font); color: var(--of-l-text); background: #fff; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.of-landing h1,.of-landing h2,.of-landing h3,.of-landing p { margin: 0; }
.of-landing *, .of-landing *::before, .of-landing *::after { box-sizing: border-box; }
.of-l-container { max-width: 1280px; margin: 0 auto; }
.of-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--of-brand-2); }
.of-eyebrow .bar { width: 22px; height: 2px; background: var(--of-brand); border-radius: 2px; }
.of-l-btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: #fff; background: var(--of-brand-grad); border-radius: 14px; box-shadow: 0 12px 26px -8px rgba(11,127,192,.5); cursor: pointer; border: none; }
.of-l-btn--ghost { color: var(--of-l-text); background: #fff; border: 1px solid #DBE6EE; box-shadow: none; }

/* landing animation keyframes */
@keyframes of-sceneFade{0%{opacity:.28}7%{opacity:1}90%{opacity:1}100%{opacity:.28}}
@keyframes of-aFill{0%,33%{background:#A9C9DD}45%,100%{background:#12A3E0}}
@keyframes of-a2Scan{0%,12%{transform:translateY(-22px);opacity:0}14%{opacity:1}33%{transform:translateY(92px);opacity:1}35%,100%{opacity:0}}
@keyframes of-qOut{0%,40%{opacity:1;transform:scale(1)}46%,100%{opacity:0;transform:scale(.6)}}
@keyframes of-faceIn{0%,42%{opacity:0;transform:scale(.5)}52%,100%{opacity:1;transform:scale(1)}}
@keyframes of-aCheckPop{0%,36%{transform:scale(0);opacity:0}44%{transform:scale(1.18);opacity:1}48%,100%{transform:scale(1);opacity:1}}
@keyframes of-aStatusAnon{0%,36%{opacity:1}42%,100%{opacity:0}}
@keyframes of-aStatusOk{0%,40%{opacity:0}47%,100%{opacity:1}}
@keyframes of-aConnect{0%,46%{transform:scaleX(0)}58%,100%{transform:scaleX(1)}}
@keyframes of-aLockPop{0%,58%{transform:scale(0);opacity:0}68%{transform:scale(1.14);opacity:1}72%,100%{transform:scale(1);opacity:1}}
@keyframes of-aSecured{0%,66%{opacity:0;transform:translateY(12px)}78%,100%{opacity:1;transform:translateY(0)}}
@keyframes of-chipIn{0%,44%{opacity:0;transform:translateY(10px)}52%{opacity:1;transform:translateY(0)}92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}
@keyframes of-chipIn2{0%,58%{opacity:0;transform:translateY(10px)}66%{opacity:1;transform:translateY(0)}92%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(0)}}