/* LOCK2PAY MVC — original design system (independent from the React reference project) */
:root {
  --navy: #0b1424;
  --navy-soft: #12203a;
  --ink: #101826;
  --primary: #1f6fed;
  --primary-dark: #1451b4;
  --teal: #0fb8a8;
  --success: #15b56f;
  --warning: #e2a531;
  --danger: #e04a4a;
  --cloud: #f5f7fb;
  --surface: #ffffff;
  --border: #e3e8f2;
  --text: #16213a;
  --muted: #64748b;
  --radius-lg: 18px;
  --radius-md: 12px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-md: 0 10px 30px -12px rgba(16, 24, 40, .18);
  --shadow-lg: 0 24px 60px -20px rgba(16, 24, 40, .28);
  --surface-soft: #f8fafc;
  --sidebar-width: 282px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--cloud);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.section { padding: 88px 0; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 13px 26px; font-weight: 600; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-dark); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-outline { background: #fff; border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 16px; font-size: 13px; }

/* Cards & surfaces */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }
.card-flat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); border-radius: var(--radius-lg); }

/* Badges & status */
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.badge-success { background: #e6f9f1; color: #0d8a56; }
.badge-warning { background: #fdf3e0; color: #a06a11; }
.badge-danger { background: #fdeaea; color: #b83232; }
.badge-info { background: #e9f1ff; color: var(--primary-dark); }
.badge-neutral { background: #eef1f7; color: var(--muted); }

/* Forms */
label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
input, textarea, select { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; font-size: 14.5px; font-family: inherit; background: #fff; color: var(--text); transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(31,111,237,.15); }
.field { margin-bottom: 18px; }
.field-error { color: var(--danger); font-size: 12.5px; margin-top: 6px; }
.field-help { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.form-alert { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 18px; }
.form-alert-error { background: #fdeaea; color: #a52424; border: 1px solid #f6c6c6; }
.form-alert-success { background: #e6f9f1; color: #0d8a56; border: 1px solid #b7ecd4; }

/* App shell (authenticated layout) */
.app-shell { display: flex; min-height: 100vh; }
.app-sidebar { width: var(--sidebar-width); flex-shrink: 0; background: linear-gradient(180deg, #091323 0%, #0d1b31 70%, #0c1728 100%); color: #cfd8ea; padding: 22px 14px; position: sticky; top: 0; height: 100vh; overflow-y: auto; border-right: 1px solid rgba(255,255,255,.05); }
.app-sidebar .brand { display:flex; align-items:center; gap:10px; color: #fff; font-weight: 800; font-size: 17px; letter-spacing: -0.04em; padding: 5px 10px 34px; }
.app-sidebar .brand > span:last-child > span { color: var(--teal); }
.brand-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:10px; color:#072137; background:linear-gradient(140deg,#77eee0,#20aaac); font-size:10px; letter-spacing:-.06em; }
.brand em { color:#90a1bd; font-size:9px; letter-spacing:.12em; font-style:normal; margin-left:auto; }
.nav-caption { margin:20px 10px 7px; color:#71809a; font-size:10px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; color: #aab7cd; font-weight: 650; font-size: 13px; margin-bottom: 2px; transition:.16s ease; }
.nav-link:hover { background: rgba(255,255,255,.055); color: #fff; transform:translateX(2px); }
.nav-link.active { background: linear-gradient(90deg, rgba(31,111,237,.25), rgba(31,111,237,.10)); color: #fff; box-shadow:inset 2px 0 0 var(--teal); }
.nav-glyph { display:grid; place-items:center; width:23px; height:23px; border:1px solid rgba(255,255,255,.1); border-radius:7px; color:#9bc4ff; font-size:8px; font-weight:800; letter-spacing:-.04em; }
.sidebar-footer { margin:30px 4px 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.sidebar-footer .nav-link { width:100%; text-align:left; background:none; border:none; cursor:pointer; }
.app-main { flex: 1; min-width: 0; }
.app-topbar { display: flex; align-items: center; justify-content: space-between; gap:16px; padding: 14px 32px; background: rgba(255,255,255,.92); backdrop-filter:blur(18px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.app-content { padding: 34px; max-width: 1360px; }
.global-search { display:flex; align-items:center; gap:10px; width:min(430px,42vw); margin-right:auto; padding:0 12px; background:var(--surface-soft); border:1px solid transparent; border-radius:10px; }
.global-search span { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.global-search input { border:0; background:transparent; box-shadow:none; padding:10px 0; font-size:13px; }
.topbar-actions { display:flex; align-items:center; gap:10px; }
.quick-create { padding:9px 13px; border-radius:9px; background:var(--navy); color:#fff; font-size:12px; font-weight:750; }
.avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; background:#e4efff; color:var(--primary-dark); font-size:12px; font-weight:800; }
.ops-live { display:flex; align-items:center; gap:6px; color:#3c5275; font-size:12px; font-weight:700; }
.ops-live i { width:7px; height:7px; background:var(--success); border-radius:50%; box-shadow:0 0 0 4px #e6f9f1; }
.admin-sidebar { background:linear-gradient(180deg,#080f1c,#11192b) !important; }

/* Stats & dashboard */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.stat-card { background: linear-gradient(160deg, #ffffff, #f7f9fd); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; position: relative; overflow: hidden; }
.stat-card::after { content: ''; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(31,111,237,.12), transparent 70%); }
.stat-label { font-size: 12.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat-value { font-size: 28px; font-weight: 800; margin-top: 8px; letter-spacing: -0.02em; }
.dashboard-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:18px; margin-bottom:20px; }
.balance-command { position:relative; overflow:hidden; padding:28px; border-radius:22px; color:#fff; background:linear-gradient(125deg,#08172a,#102d4a 65%,#13636a); box-shadow:var(--shadow-lg); }
.balance-command::after { content:''; position:absolute; width:260px; height:260px; right:-100px; top:-135px; border:1px solid rgba(117,231,220,.35); border-radius:50%; box-shadow:0 0 0 26px rgba(117,231,220,.05),0 0 0 53px rgba(117,231,220,.035); }
.balance-command > * { position:relative; z-index:1; }
.balance-command .stat-label { color:#9bb4c9; }
.balance-command .balance-value { font-size:clamp(32px,4vw,46px); letter-spacing:-.06em; font-weight:800; margin:8px 0 17px; }
.balance-actions { display:flex; flex-wrap:wrap; gap:9px; }
.balance-actions .btn { padding:10px 15px; font-size:12px; }
.balance-actions .btn-outline { color:#fff; border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.08); }
.finance-snapshot { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.finance-cell { min-height:118px; padding:19px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow-sm); }
.finance-cell strong { display:block; margin-top:10px; font-size:20px; letter-spacing:-.035em; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr); gap:18px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:17px; border-bottom:1px solid var(--border); }
.panel-head h2 { font-size:16px; }
.panel-kicker { font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.signal-list { display:grid; gap:12px; }
.signal-item { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--border); }
.signal-item:last-child { border:0; }
.signal-dot { width:9px; height:9px; flex:none; margin-top:5px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px #e1f8f5; }
.signal-item strong { display:block; font-size:13px; }.signal-item p { color:var(--muted); font-size:12px; margin-top:3px; }

/* Escrow timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 26px 34px; }
.timeline li::before { content: ''; position: absolute; left: 8px; top: 4px; bottom: -6px; width: 2px; background: var(--border); }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #eef1f7; border: 2px solid var(--border); }
.timeline li.done .dot { background: var(--success); border-color: var(--success); }
.timeline li.current .dot { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 5px rgba(31,111,237,.18); }
.timeline li.blocked .dot { background: var(--danger); border-color: var(--danger); }
.timeline .t-title { font-weight: 700; font-size: 14.5px; }
.timeline .t-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Escrow vault card */
.vault-card { border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--navy) 0%, var(--navy-soft) 60%, #163257 100%); color: #fff; padding: 26px; position: relative; overflow: hidden; }
.vault-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 0%, rgba(15,184,168,.25), transparent 45%); }
.vault-code { font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .12em; font-size: 20px; font-weight: 700; }

/* Countdown */
.countdown { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 30px; font-weight: 700; letter-spacing: .04em; }

/* Table */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--border); }
.data-table td { padding: 14px; border-bottom: 1px solid var(--border); }
.data-table tr:hover td { background: #fafbfe; }

/* Public marketing nav/hero */
.public-header { position: sticky; top: 0; z-index: 40; background: rgba(11,20,36,.92); backdrop-filter: blur(10px); color: #fff; }
.public-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
.public-nav .links { display: flex; gap: 26px; align-items: center; font-size: 14px; font-weight: 600; color: #b7c2da; }
.public-nav .links a:hover { color: #fff; }
.public-mobile-menu { display: none; }
.public-mobile-backdrop { display: none; }
.hero { background: radial-gradient(circle at 15% 0%, #163257 0, var(--navy) 55%); color: #fff; padding: 90px 0 70px; }
.hero h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; }
.hero p.lead { font-size: 18px; color: #b7c2da; max-width: 560px; margin-top: 18px; }

footer.public-footer { background: var(--navy); color: #9aa8c4; padding: 50px 0 30px; }

/* Mobile */
.mobile-menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; }
@media (max-width: 900px) {
  .app-sidebar { position: fixed; left: -280px; z-index: 50; transition: left .2s ease; box-shadow: var(--shadow-lg); }
  .app-sidebar.open { left: 0; }
  .app-content { padding: 20px; }
  .app-topbar { padding: 14px 18px; }
  .global-search { display:none; }.topbar-actions .badge,.ops-live { display:none; }
  .public-nav .links { display: none; }
  .public-actions { display: none; }
  .mobile-menu-toggle { display: block; }
  .public-mobile-menu {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    z-index: 60;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height .22s ease;
  }
  .public-mobile-menu-inner {
    margin: 0 12px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    background: linear-gradient(160deg, #0d1b31, #0c2138);
    box-shadow: var(--shadow-lg);
  }
  .public-mobile-menu a {
    display: block;
    padding: 11px 10px;
    color: #d7e2f3;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
  }
  .public-mobile-menu a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
  }
  .public-mobile-menu-auth {
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: grid;
    gap: 10px;
  }
  .public-mobile-backdrop {
    position: fixed;
    inset: 64px 0 0;
    z-index: 55;
    background: rgba(3, 12, 23, .55);
    backdrop-filter: blur(2px);
  }
  body.public-menu-open .public-mobile-menu { max-height: 560px; }
  body.public-menu-open .public-mobile-backdrop { display: block; }
  .section { padding: 56px 0; }
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.text-muted { color: var(--muted); }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap-8 { gap: 8px; } .gap-16 { gap: 16px; }

@media (max-width: 760px) { .app-content{padding:22px 16px 94px}.dashboard-hero,.workspace-grid{grid-template-columns:1fr}.finance-snapshot{grid-template-columns:1fr 1fr}.balance-command{padding:23px}.data-table thead{display:none}.data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}.data-table tr{padding:12px 0;border-bottom:1px solid var(--border)}.data-table td{border:0;padding:5px 0}.data-table td::before{content:attr(data-label);display:block;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } }

/* Public homepage: escrow-first visual composition */
.public-hero { position:relative; overflow:hidden; padding:102px 0 76px; color:#fff; background:linear-gradient(126deg,#071326 0%,#0d2846 57%,#0b5e68 130%); }
.hero-grid-lines { position:absolute; inset:0; opacity:.18; background-image:linear-gradient(rgba(143,232,220,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(143,232,220,.22) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(90deg,#000 0%,transparent 76%); }
.hero-layout { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.03fr) minmax(400px,.97fr); align-items:center; gap:54px; }
.trust-chip { display:inline-flex; align-items:center; gap:8px; margin-bottom:27px; padding:8px 11px; border:1px solid rgba(143,232,220,.22); border-radius:999px; background:rgba(143,232,220,.08); color:#bfefea; font-size:11px; font-weight:750; letter-spacing:.04em; }
.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#6de5d5; box-shadow:0 0 0 4px rgba(109,229,213,.13); }
.hero-eyebrow { color:#82e3d7; }.hero-copy h1 { max-width:620px; font-size:clamp(42px,5vw,68px); line-height:1.01; letter-spacing:-.065em; }.hero-copy h1 span { color:#92ece0; }.hero-lead { max-width:545px; margin-top:23px; color:#b9cadf; font-size:18px; line-height:1.7; }.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:22px; margin-top:31px; }.text-link-light,.text-link { display:inline-flex; gap:8px; align-items:center; font-size:14px; font-weight:750; transition:gap .18s ease; }.text-link-light { color:#fff; }.text-link { color:var(--primary-dark); }.text-link-light:hover,.text-link:hover { gap:12px; }.hero-proof { display:flex; align-items:center; gap:12px; margin-top:36px; color:#a8bad1; font-size:12px; line-height:1.45; }.hero-proof strong { color:#edf7ff; }.proof-avatars { display:flex; padding-left:8px; }.proof-avatars span { display:grid; place-items:center; width:28px; height:28px; margin-left:-8px; border:2px solid #0e2845; border-radius:50%; background:#9bd8eb; color:#09213a; font-size:10px; font-weight:800; }.proof-avatars span:nth-child(2){background:#f7d9a6}.proof-avatars span:nth-child(3){background:#91dec5}
.vault-visual { position:relative; min-height:470px; }.vault-orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(143,232,220,.18); border-radius:50%; transform:translate(-50%,-50%); }.orbit-one { width:440px; height:440px; }.orbit-two { width:332px; height:332px; border-style:dashed; }.vault-core { position:absolute; z-index:2; top:85px; left:50%; width:min(100%,350px); padding:22px; transform:translateX(-50%); border:1px solid rgba(255,255,255,.21); border-radius:23px; background:linear-gradient(145deg,rgba(23,57,84,.97),rgba(7,24,42,.94)); box-shadow:0 30px 68px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(12px); }.vault-topline { display:flex; align-items:center; gap:7px; color:#c7d7eb; font-size:10px; font-weight:800; letter-spacing:.11em; }.vault-topline .live-dot { margin-left:auto; width:6px; height:6px; }.shield-glyph { display:grid; place-items:center; width:21px; height:21px; border-radius:7px; background:#92ece0; color:#0a3443; font-size:10px; }.vault-label { margin-top:31px; color:#91a7c1; font-size:12px; }.vault-amount { margin:7px 0 22px; color:#fff; font-size:36px; font-weight:800; letter-spacing:-.055em; }.vault-amount span { color:#91a7c1; font-size:18px; }.vault-code { display:flex; justify-content:space-between; padding:12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; background:rgba(255,255,255,.055); }.vault-code span { color:#91a7c1; font-size:9px; font-weight:700; letter-spacing:.1em; }.vault-code strong { font-family:'JetBrains Mono',monospace; color:#e4fbf7; font-size:11px; letter-spacing:.08em; }.vault-progress { height:5px; margin-top:20px; overflow:hidden; border-radius:9px; background:rgba(255,255,255,.13); }.vault-progress span { display:block; width:53%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--teal),#9aeee3); }.vault-status { display:flex; align-items:center; gap:7px; margin-top:12px; color:#bfece6; font-size:11px; }.vault-status i { width:6px; height:6px; border-radius:50%; background:var(--teal); }.escrow-float { position:absolute; z-index:3; display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid rgba(255,255,255,.19); border-radius:12px; background:rgba(15,44,70,.86); box-shadow:0 14px 34px rgba(0,0,0,.16); }.escrow-float small { display:block; color:#93a9c2; font-size:9px; text-transform:uppercase; letter-spacing:.09em; }.escrow-float strong { display:block; margin-top:3px; color:#fff; font-size:11px; }.buyer-float { top:41px; left:0; }.seller-float { right:0; bottom:110px; }.person-mark { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:#a4e9e0; color:#073546; font-size:10px; font-weight:800; }.seller-mark { background:#b8cff7; color:#1a4380; }.journey-pills { position:absolute; z-index:3; bottom:26px; left:50%; display:flex; align-items:center; justify-content:center; width:100%; transform:translateX(-50%); color:#aabbd1; font-size:10px; font-weight:700; }.journey-pills b { width:18px; height:1px; margin:0 5px; background:rgba(255,255,255,.26); }.journey-pills .complete { color:#8ee7db; }.journey-pills .current { color:#fff; }
.proof-strip { border-bottom:1px solid var(--border); background:#fff; }.proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; padding:25px 20px; }.proof-grid > div { display:flex; align-items:flex-start; gap:13px; }.proof-icon { display:grid; place-items:center; flex:0 0 auto; width:29px; height:29px; border-radius:8px; background:#e5f4ff; color:var(--primary-dark); font-size:10px; font-weight:800; }.proof-grid p { color:var(--muted); font-size:12px; line-height:1.5; }.proof-grid strong { color:var(--text); font-size:13px; }
.split-intro { display:grid; grid-template-columns:1fr minmax(230px,.55fr); gap:50px; align-items:end; }.section-intro h2,.metrics-layout h2 { max-width:590px; margin-top:10px; font-size:clamp(30px,4vw,47px); letter-spacing:-.045em; }.split-intro > p { color:var(--muted); line-height:1.7; }.workflow-section { background:var(--cloud); }.workflow-track { display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin-top:53px; }.workflow-step { position:relative; min-height:220px; padding:0 17px; }.workflow-step:first-child { padding-left:0; }.workflow-step:not(:last-child)::after { position:absolute; top:29px; left:39px; width:calc(100% - 18px); height:1px; background:#d4dde9; content:''; }.workflow-node { position:relative; z-index:1; width:17px; height:17px; margin:17px 0 24px; border:4px solid #e5ebf3; border-radius:50%; background:#fff; }.workflow-step.emphasized .workflow-node { border-color:#bceee7; background:var(--teal); box-shadow:0 0 0 6px rgba(15,184,168,.1); }.workflow-number { color:#8b99ac; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; }.workflow-step h3 { font-size:16px; }.workflow-step p { margin-top:8px; color:var(--muted); font-size:13px; line-height:1.55; }
.audience-section { background:#fff; }.audience-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }.audience-card { position:relative; min-height:530px; overflow:hidden; padding:38px; border-radius:23px; }.buyer-card { color:#fff; background:linear-gradient(135deg,#0b213b,#173f68); }.seller-card { background:linear-gradient(145deg,#eff9f8,#d9f2ef); }.audience-tag { display:inline-block; margin:16px 0 25px; font-size:10px; font-weight:800; letter-spacing:.12em; }.buyer-card .eyebrow,.buyer-card .audience-tag { color:#9cece2; }.seller-card .audience-tag { color:#067d75; }.audience-card h2 { max-width:430px; font-size:31px; letter-spacing:-.04em; }.audience-card > p:not(.eyebrow) { max-width:430px; margin-top:16px; color:#c0d0e2; line-height:1.68; }.seller-card > p:not(.eyebrow) { color:#4f6873; }.audience-card ul { display:grid; gap:9px; margin:25px 0; padding:0; list-style:none; font-size:13px; }.audience-card li::before { margin-right:9px; color:#83e6d8; content:'+'; font-weight:800; }.seller-card li::before { color:#0b9688; }.buyer-card .text-link { color:#fff; }.buyer-card-graphic,.seller-card-graphic { position:absolute; right:28px; bottom:26px; }.mini-phone { display:grid; gap:8px; width:205px; padding:20px; border:1px solid rgba(255,255,255,.16); border-radius:17px; background:rgba(255,255,255,.1); box-shadow:0 20px 40px rgba(0,0,0,.18); }.mini-status { width:22px; height:5px; border-radius:8px; background:#92ece0; }.mini-phone strong { font-size:14px; }.mini-phone small { color:#aac2da; font-size:10px; }.seller-card-graphic { display:grid; gap:8px; min-width:215px; padding:18px; border:1px solid #bce0db; border-radius:15px; background:#fff; box-shadow:0 17px 35px rgba(21,73,76,.13); }.seller-card-graphic span { color:#6e8790; font-size:9px; font-weight:800; letter-spacing:.11em; }.seller-card-graphic strong { color:#102d3b; font-size:22px; letter-spacing:-.045em; }.seller-card-graphic i { color:#0f9275; font-size:10px; font-style:normal; }
.security-band { padding:87px 0; color:#edf4ff; background:#0b1627; }.security-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; }.security-layout h2 { margin-top:12px; font-size:clamp(30px,4vw,48px); letter-spacing:-.05em; }.security-list { display:grid; gap:0; }.security-list article { display:flex; gap:17px; padding:20px 0; border-bottom:1px solid rgba(255,255,255,.11); }.security-index { display:grid; place-items:center; width:29px; height:29px; border:1px solid rgba(143,232,220,.35); border-radius:8px; color:#8fe8dc; font-size:11px; font-weight:800; }.security-list h3 { font-size:15px; }.security-list p { margin-top:5px; color:#9aaec7; font-size:13px; line-height:1.55; }.metrics-section { background:#f0f5fb; }.metrics-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:65px; align-items:center; }.metrics-copy { max-width:510px; margin-top:17px; color:var(--muted); line-height:1.7; }.metrics-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #d8e2ef; border-left:1px solid #d8e2ef; }.metrics-grid div { min-height:134px; padding:24px; border-right:1px solid #d8e2ef; border-bottom:1px solid #d8e2ef; background:rgba(255,255,255,.42); }.metrics-grid strong { display:block; color:#122644; font-size:30px; letter-spacing:-.05em; }.metrics-grid span { display:block; margin-top:7px; color:var(--muted); font-size:12px; font-weight:650; }.final-cta { padding:75px 0; color:#fff; background:linear-gradient(115deg,#0e2440,#0c5964); }.final-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; }.final-cta h2 { margin-top:9px; font-size:clamp(30px,4vw,46px); letter-spacing:-.05em; }.final-cta p:not(.eyebrow) { margin-top:13px; color:#bbd1db; }.final-actions { display:flex; flex-wrap:wrap; gap:10px; }.final-actions .btn-primary { background:#8ceadd; color:#08323c; }.final-actions .btn-primary:hover { background:#b2f5eb; }
@media (max-width:900px) { .public-hero{padding:75px 0 54px}.hero-layout,.security-layout,.metrics-layout,.split-intro{grid-template-columns:1fr;gap:35px}.vault-visual{max-width:500px;margin:0 auto}.proof-grid{grid-template-columns:1fr}.workflow-track{grid-template-columns:1fr 1fr;gap:16px}.workflow-step{min-height:170px;padding:0}.workflow-step:not(:last-child)::after{display:none}.audience-grid{grid-template-columns:1fr}.final-cta-inner{display:block}.final-actions{margin-top:26px} }
@media (max-width:560px) { .hero-copy h1{font-size:42px}.vault-visual{min-height:407px}.vault-core{top:69px;width:290px}.orbit-one{width:320px;height:320px}.orbit-two{width:250px;height:250px}.escrow-float{transform:scale(.84)}.buyer-float{left:-12px}.seller-float{right:-13px;bottom:82px}.journey-pills{bottom:7px;font-size:8px}.journey-pills b{width:8px;margin:0 3px}.workflow-track{grid-template-columns:1fr}.audience-card{min-height:555px;padding:28px}.audience-card h2{font-size:27px}.buyer-card-graphic,.seller-card-graphic{right:18px;bottom:18px}.security-band{padding:62px 0}.metrics-grid div{min-height:108px;padding:17px}.proof-grid{padding:22px 20px}.hero-actions{gap:16px} }

/* Page-level premium system for remaining views */
.page-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.page-title {
  font-size: clamp(30px, 3.4vw, 44px);
  letter-spacing: -0.04em;
}

.page-subtitle {
  margin-top: 10px;
  max-width: 680px;
  color: var(--muted);
  line-height: 1.68;
}

.marketing-wrap {
  background: #fff;
}

.marketing-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0 68px;
  background: linear-gradient(140deg, #0a1527, #0f2846 58%, #0f6868 130%);
  color: #fff;
}

.marketing-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(143, 232, 220, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 232, 220, .18) 1px, transparent 1px);
  background-size: 62px 62px;
  opacity: .15;
}

.marketing-hero .container {
  position: relative;
  z-index: 1;
}

.marketing-hero h1 {
  max-width: 900px;
  font-size: clamp(36px, 4.6vw, 62px);
  letter-spacing: -0.06em;
  line-height: 1.02;
}

.marketing-hero p {
  margin-top: 16px;
  max-width: 700px;
  color: #b7c9dd;
  font-size: 17px;
  line-height: 1.7;
}

.marketing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 28px;
}

.content-band {
  padding: 72px 0;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.feature-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.feature-card h3 {
  font-size: 18px;
}

.feature-card p {
  margin-top: 9px;
  color: var(--muted);
  line-height: 1.62;
  font-size: 14px;
}

.split-panel {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

.metric-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
}

.metric-band > div {
  padding: 20px;
  border-right: 1px solid var(--border);
}

.metric-band > div:last-child {
  border-right: 0;
}

.metric-band strong {
  display: block;
  font-size: 28px;
  letter-spacing: -0.05em;
}

.metric-band span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.auth-shell {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 0%, #173759, #0b1628 65%);
}

.auth-shell .auth-wrap {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 26px;
  padding: 42px 20px;
  align-items: stretch;
}

.auth-story {
  border-radius: 22px;
  padding: 34px;
  color: #edf5ff;
  background: linear-gradient(150deg, rgba(18, 47, 75, .92), rgba(14, 90, 92, .82));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--shadow-lg);
}

.auth-story h2 {
  margin-top: 10px;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -0.05em;
}

.auth-story p {
  margin-top: 14px;
  color: #b9d2e7;
  line-height: 1.7;
}

.auth-story ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.auth-story li {
  color: #d6e5f3;
  font-size: 13px;
}

.auth-story li::before {
  content: '✓';
  margin-right: 8px;
  color: #84ebdd;
  font-weight: 800;
}

.auth-panel {
  border-radius: 22px;
  border: 1px solid #d7e2f2;
  background: #fff;
  padding: 28px;
  box-shadow: 0 24px 48px -30px rgba(16, 24, 40, .42);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 21px;
  font-weight: 800;
}

.auth-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.filters-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  padding: 15px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

.filters-bar input,
.filters-bar select {
  width: auto;
  min-width: 170px;
}

.list-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.list-row {
  display: grid;
  grid-template-columns: 1.35fr .8fr .8fr .7fr .8fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.list-row:last-child {
  border-bottom: 0;
}

.list-row:hover {
  background: #f8fbff;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.buyer-shell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.buyer-safe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 750;
  background: #dcf8f3;
  color: #087c72;
}

.payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.note-box {
  border: 1px dashed #b6cfef;
  border-radius: 12px;
  padding: 12px 14px;
  background: #f6f9ff;
  color: #35547d;
  font-size: 13px;
}

.empty-state {
  text-align: center;
  padding: 48px 22px;
}

.empty-state h3 {
  margin-top: 14px;
  font-size: 21px;
}

.empty-state p {
  margin-top: 7px;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 900px) {
  .split-panel,
  .auth-shell .auth-wrap,
  .metric-band,
  .list-row {
    grid-template-columns: 1fr;
  }

  .metric-band > div {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .metric-band > div:last-child {
    border-bottom: 0;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .auth-story {
    display: none;
  }

  .filters-bar input,
  .filters-bar select {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 768px) {
    .public-actions {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .public-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 20px;
        padding-right: 20px;
    }

    .public-nav > a {
        flex-shrink: 0;
    }

    .mobile-menu-toggle {
        margin-left: auto;
        padding: 8px;
    }
}