:root {
  --navy: #0b1f3a;
  --navy-deep: #071528;
  --teal: #00b9a8;
  --teal-bright: #2ad4c3;
  --teal-ink: #00756b;
  --ink: #0b1f3a;
  --muted: #4a5b70;
  --on-navy: #ffffff;
  --on-navy-muted: #b8c4d4;
  --bg: #ffffff;
  --bg-soft: #f2f6f8;
  --line: #e1e7ee;
  --line-field: #7d8ea3; /* field edge: 3:1 on white and on --bg-soft */
  --link: var(--teal-ink);
  --focus: var(--teal-ink); /* teal is 2.5:1 on white; dark areas switch back to it */
  --line-dark: rgba(255, 255, 255, .1);
  --wrap: 1200px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; scrollbar-color: #24395a var(--navy-deep); }
::selection { background: rgba(0, 185, 168, .38); }

body {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--navy-deep);
  caret-color: var(--teal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 7vw, 5.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); font-weight: 700; letter-spacing: -0.035em; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 16px; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 144px 0 152px; }
@media (max-width: 760px) { .section { padding: 88px 0 96px; } }
.soft { background: var(--bg-soft); }
.dark { --ink: #fff; --muted: var(--on-navy-muted); --line: rgba(255, 255, 255, .1); --link: var(--teal); background: var(--navy-deep); color: var(--on-navy); }
.dark.soft { background: linear-gradient(var(--navy), var(--navy-deep)); }
.dark p { color: var(--on-navy-muted); }
.section + .section, .section.dark + .closing { border-top: 1px solid var(--line-dark); }
.dark, .header { --focus: var(--teal); }

.lead { font-size: 1.2rem; line-height: 1.55; color: var(--muted); max-width: 40em; }
.dark .lead { color: var(--on-navy-muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 30; background: var(--bg); color: var(--ink); padding: 8px 12px; }

/* Section heads: title left, lead right */
.head { display: grid; grid-template-columns: 1.15fr .85fr; gap: 24px 64px; align-items: end; }
.head h2 { margin: 0; }
.head .lead { margin: 0 0 6px; font-size: 1.1rem; }
@media (max-width: 900px) { .head { grid-template-columns: 1fr; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 0 20px; border-radius: 10px; border: 1px solid transparent; /* shows in forced colors */
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  background: var(--teal); color: var(--navy);
  transition: transform 160ms var(--ease-out), background-color 200ms ease, box-shadow 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn .arrow, .more .arrow { transition: transform 200ms var(--ease-out); }
.btn-ghost { background: transparent; color: var(--on-navy); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; color: var(--on-navy); font-weight: 600; text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--teal-bright); }
  .btn:hover .arrow, .more:hover .arrow { transform: translateX(3px); }
  .btn-ghost:hover { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6); }
  .more:hover { color: var(--teal-bright); }
}
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* Header: full width, glass over the page, hairline under it */
.header { position: sticky; top: 0; z-index: 20; background: rgba(7, 21, 40, .72); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo img { width: 136px; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--on-navy-muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 200ms ease; }
.nav .btn { min-height: 36px; padding: 0 16px; border-radius: 8px; color: var(--navy); font-weight: 600; }
.nav .lang { font-size: 0.8rem; font-weight: 800; letter-spacing: .04em; color: var(--on-navy); padding: 5px 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
@media (hover: hover) and (pointer: fine) { .nav a:not(.btn):hover { color: #fff; } }
@media (max-width: 760px) { .nav .hide-sm { display: none; } .nav { gap: 14px; } .logo img { width: 112px; } }

/* Hero: headline left, lead and action right, the product right under them */
html, body { overflow-x: clip; }
body:has(.hero) .header { margin-bottom: -64px; } /* the hero starts under the bar */
.hero { --w: min(1200px, calc(100vw - 40px)); position: relative; z-index: 1; padding: 144px 0 0; isolation: isolate; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px 80px; align-items: end; }
.hero h1 { max-width: 12ch; margin: 0; font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1; }
.hero .lead { margin: 0; max-width: 34em; font-size: 1.15rem; }
.hero .actions { align-items: center; gap: 28px; margin-top: 28px; }
@media (max-width: 900px) { .hero-copy { grid-template-columns: 1fr; } .hero { padding-top: 128px; } }
@media (max-width: 700px) {
  .hero { --w: calc(100vw - 32px); padding-top: 104px; }
  .hero-copy { gap: 20px; }
  .hero .lead { font-size: 1.05rem; }
  .hero .actions { gap: 4px 24px; margin-top: 24px; }
}

/* Hero stage: a laptop running PayCorr settles in, its screen comes alive, and it straightens as
   the page scrolls; the Admin and Teller phones (the iOS redesign) sit in front of it. */
.stage { position: relative; z-index: 2; width: var(--w); margin: 64px auto calc(var(--w) * .07); padding: 0 3%; }
@media (max-width: 700px) { .stage { margin-top: 40px; margin-bottom: calc(var(--w) * .22); } }
/* the one light on the page: teal, behind the top edge of the laptop */
.stage::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -18%; width: 110%; height: 70%; translate: -50% 0; pointer-events: none; background: radial-gradient(closest-side, rgba(0, 185, 168, .2), transparent); }
.device { animation: settle 1400ms var(--ease-out) both; }
@keyframes settle { from { transform: translateY(32px); } }
@supports (animation-timeline: scroll()) {
  .tilt { animation: flatten linear both; animation-timeline: scroll(root); animation-range: 0 75vh; }
  @keyframes flatten { from { transform: perspective(1800px) rotateX(10deg) scale(.97); } to { transform: perspective(1800px) rotateX(0) scale(1); } }
}
.laptop { container-type: inline-size; }
.screen {
  position: relative; aspect-ratio: 16 / 10; padding: 1.2cqi 1.2cqi 1.6cqi; border-radius: 2.2cqi 2.2cqi 0 0;
  background: #070b13; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 1px #1c2533, 0 80px 120px -50px rgba(0, 0, 0, .9);
}
.screen::after { content: ""; position: absolute; inset: 1.2cqi 1.2cqi 1.6cqi; border-radius: 1cqi; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .09), transparent 38%); }
.hinge { position: relative; height: 1.5cqi; margin: 0 -6.5%; border-radius: 0 0 2.4cqi 2.4cqi / 0 0 1.4cqi 1.4cqi; background: linear-gradient(#4a5466, #232b38 55%, #151b25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 24px 40px -14px rgba(0, 0, 0, .7); }
.hinge::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 55%; translate: -50% 0; border-radius: 0 0 1cqi 1cqi; background: #10151d; }

.ui { display: grid; grid-template-columns: 5.4cqi 1fr; height: 100%; overflow: hidden; border-radius: 1cqi; background: linear-gradient(180deg, #102a4c, #0b1f3a 60%); color: #fff; font-size: 1.25cqi; line-height: 1.35; text-align: left; }
.ui small { display: block; font-size: 1.02cqi; color: rgba(255, 255, 255, .6); }
.ui-side { display: flex; flex-direction: column; align-items: center; gap: 1.5cqi; padding-top: 1.8cqi; background: rgba(0, 0, 0, .22); }
.ui-side svg { width: 2.6cqi; margin-bottom: .6cqi; overflow: visible; }
.ui-side i { width: 2.2cqi; height: 2.2cqi; border-radius: .6cqi; background: rgba(255, 255, 255, .08); }
.ui-side i:nth-of-type(1) { background: rgba(0, 185, 168, .4); box-shadow: 0 0 0 .3cqi rgba(0, 185, 168, .12); }
.ui-main { display: grid; grid-template-rows: auto auto 1fr; gap: 1.5cqi; padding: 2cqi 2.4cqi; min-height: 0; }
.ui-top { display: flex; align-items: center; justify-content: space-between; }
.ui-top b { font-size: 1.9cqi; font-weight: 800; letter-spacing: -.02em; }
.ui-live { display: inline-flex; align-items: center; gap: .6cqi; padding: .45cqi 1.1cqi; border-radius: 99cqi; font-size: 1cqi; font-weight: 700; color: var(--teal-bright); background: rgba(0, 185, 168, .14); }
.ui-live::before { content: ""; width: .7cqi; height: .7cqi; border-radius: 50%; background: currentColor; }
.ui-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqi; }
.ui-kpis > div, .ui-card { border-radius: 1.1cqi; padding: 1.3cqi 1.5cqi; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ui-kpis > div { animation: rise 800ms var(--ease-out) both; }
.ui-kpis > div:nth-child(1) { animation-delay: 1100ms; }
.ui-kpis > div:nth-child(2) { animation-delay: 1180ms; }
.ui-kpis > div:nth-child(3) { animation-delay: 1260ms; }
.ui-kpis b { display: block; font-size: 3.1cqi; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ui-kpis em { font-style: normal; font-size: 1cqi; font-weight: 700; color: var(--teal-bright); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@property --ops { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --pts { syntax: "<integer>"; initial-value: 0; inherits: false; }
@property --rec { syntax: "<integer>"; initial-value: 0; inherits: false; }
.c-ops { counter-reset: ops var(--ops); animation: c-ops 2200ms 1300ms var(--ease-out) both; }
.c-pts { counter-reset: pts var(--pts); animation: c-pts 2200ms 1380ms var(--ease-out) both; }
.c-rec { counter-reset: rec var(--rec); animation: c-rec 2200ms 1460ms var(--ease-out) both; }
.c-ops::after { content: counter(ops); }
.c-pts::after { content: counter(pts); }
.c-rec::after { content: counter(rec) "%"; }
@keyframes c-ops { to { --ops: 864; } }
@keyframes c-pts { to { --pts: 37; } }
@keyframes c-rec { to { --rec: 100; } }
.ui-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.2cqi; min-height: 0; }
.ui-card { display: flex; flex-direction: column; gap: 1cqi; min-height: 0; overflow: hidden; }
.bars { flex: 1; display: flex; align-items: flex-end; gap: .8cqi; padding-top: 1cqi; }
.bars i { flex: 1; height: var(--h); border-radius: .5cqi .5cqi .15cqi .15cqi; transform-origin: bottom; background: linear-gradient(180deg, var(--teal-bright), rgba(0, 185, 168, .2)); animation: grow 1000ms var(--ease-out) both; animation-delay: calc(1400ms + var(--i) * 70ms); }
.bars i:nth-child(1) { --h: 34%; --i: 0; } .bars i:nth-child(2) { --h: 46%; --i: 1; } .bars i:nth-child(3) { --h: 40%; --i: 2; }
.bars i:nth-child(4) { --h: 58%; --i: 3; } .bars i:nth-child(5) { --h: 71%; --i: 4; } .bars i:nth-child(6) { --h: 53%; --i: 5; }
.bars i:nth-child(7) { --h: 82%; --i: 6; } .bars i:nth-child(8) { --h: 94%; --i: 7; } .bars i:nth-child(9) { --h: 68%; --i: 8; }
.bars i:nth-child(10) { --h: 63%; --i: 9; } .bars i:nth-child(11) { --h: 86%; --i: 10; } .bars i:nth-child(12) { --h: 57%; --i: 11; }
@keyframes grow { from { transform: scaleY(0); opacity: 0; } }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: 2.4cqi 1fr auto; align-items: center; gap: 1cqi; padding: .75cqi .6cqi; margin: 0 -.6cqi; border-radius: .7cqi; animation: row 700ms var(--ease-out) both; }
.rows li:nth-child(1) { animation-delay: 1500ms; }
.rows li:nth-child(2) { animation-delay: 1600ms; }
.rows li:nth-child(3) { animation-delay: 1700ms; }
.rows li:nth-child(4) { animation-delay: 1800ms; }
.rows i { width: 2.4cqi; height: 2.4cqi; border-radius: 50%; background: rgba(0, 185, 168, .18); box-shadow: inset 0 0 0 .5cqi rgba(0, 185, 168, .35); }
.rows b { display: block; font-size: 1.12cqi; font-weight: 700; }
.rows small { font-size: .92cqi; }
.rows em { font-style: normal; font-size: 1.08cqi; font-weight: 800; font-variant-numeric: tabular-nums; }
@keyframes row { from { opacity: 0; transform: translateX(3cqi); } }

.ph {
  --pw: calc(var(--w) * .17); container-type: inline-size; position: absolute; z-index: 3; width: var(--pw); aspect-ratio: 9 / 19.5;
  padding: calc(var(--pw) * .028); border-radius: calc(var(--pw) * .16);
  background: linear-gradient(145deg, #4a5466, #141a24 40%, #2b3342);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 50px 90px -30px rgba(0, 0, 0, .85);
}
.ph-admin { left: -2%; bottom: -10%; rotate: -5deg; }
.ph-teller { --pw: calc(var(--w) * .19); right: -2%; bottom: -14%; rotate: 5deg; }
@media (max-width: 700px) {
  .ph-admin { --pw: calc(var(--w) * .3); left: -2%; bottom: -24%; }
  .ph-teller { --pw: calc(var(--w) * .33); right: -2%; bottom: -30%; }
}

.scr { position: relative; height: 100%; overflow: hidden; border-radius: 13cqi; padding: 15cqi 4cqi 0; line-height: 1.3; text-align: left; }
.scr::before { content: ""; position: absolute; left: 50%; top: 3.2cqi; z-index: 2; width: 28cqi; height: 8cqi; translate: -50% 0; border-radius: 99cqi; background: #000; }
.scr svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.scr-light { background: #f2f5f7; color: #0b1f3a; }
.scr-dark { background: #071b33; color: #fff; }

.t-head { display: flex; align-items: flex-end; justify-content: space-between; padding: 0 1cqi; margin-bottom: 3.4cqi; }
.t-head small { display: block; font-size: 3.4cqi; font-weight: 600; color: #4a5b70; }
.t-head b { display: block; font-size: 8.2cqi; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.t-head .mark { width: 6.8cqi; margin-bottom: 1.5cqi; stroke: none; overflow: visible; }
.t-card { display: flex; align-items: center; gap: 3.9cqi; padding: 4.3cqi; margin-bottom: 3.4cqi; border-radius: 5.8cqi; background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 31, 58, .07); animation: rise 700ms var(--ease-out) both; }
.t-card:nth-child(2) { animation-delay: 1500ms; }
.t-card:nth-child(3) { animation-delay: 1600ms; }
.t-card:nth-child(4) { animation-delay: 1700ms; }
.t-card b { flex: 1; font-size: 4.6cqi; font-weight: 700; }
.t-card .chev { width: 4.8cqi; height: 4.8cqi; color: #8a99ad; stroke-width: 2.2; }
.gi { display: grid; place-items: center; flex: none; width: 15.5cqi; height: 15.5cqi; border-radius: 4.3cqi; }
.gi svg { width: 7.2cqi; height: 7.2cqi; stroke-width: 1.8; }
.g1 { background: #ddf4f1; color: #00796d; } .g2 { background: #e3ecf8; color: #2b5c9e; } .g3 { background: #f6ecdc; color: #8a5a00; }
.t-order {
  position: absolute; left: 3.9cqi; right: 3.9cqi; bottom: 25cqi; height: 14cqi; display: flex; align-items: center; gap: 2.4cqi; padding: 0 1.7cqi 0 3.9cqi;
  border-radius: 5.3cqi; font-size: 3.6cqi; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 22px rgba(11, 31, 58, .12); animation: pop 600ms 2100ms var(--ease-out) both;
}
.t-order svg { width: 5.3cqi; height: 5.3cqi; flex: none; }
.t-order span { flex: 1; white-space: nowrap; }
.t-order em { font-style: normal; font-weight: 700; font-size: 3.9cqi; padding: 2.7cqi 3.9cqi; border-radius: 3.9cqi; background: var(--teal); color: var(--navy); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.94); } }

.tabbar { position: absolute; left: 2.9cqi; right: 2.9cqi; bottom: 5.5cqi; height: 16cqi; display: flex; align-items: center; justify-content: space-around; border-radius: 99cqi; }
.tabbar svg { width: 5.4cqi; height: 5.4cqi; stroke-width: 2; }
.scr-light .tabbar { color: #4a5b70; background: rgba(255, 255, 255, .74); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), 0 6px 22px rgba(11, 31, 58, .12); }
.scr-light .tabbar .on { color: #00796d; }
.scr-dark .tabbar { color: #afc0d6; background: rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 8px 26px rgba(0, 0, 0, .28); }
.scr-dark .tabbar .on { color: #3fd0c1; }
.qr { display: grid; place-items: center; width: 13cqi; height: 13cqi; border-radius: 50%; background: #0b1f3a; color: #fff; }

.a-head { display: flex; align-items: center; justify-content: space-between; padding: 0 1cqi; margin-bottom: 3.4cqi; }
.a-head b { font-size: 8.2cqi; font-weight: 800; letter-spacing: -.03em; }
.round { display: grid; place-items: center; width: 10.6cqi; height: 10.6cqi; border-radius: 50%; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.round svg { width: 4.8cqi; height: 4.8cqi; stroke-width: 2.4; }
.a-search { display: flex; align-items: center; gap: 2.4cqi; height: 11cqi; padding: 0 3.4cqi; margin-bottom: 3.4cqi; border-radius: 3.9cqi; background: #102a4c; color: #afc0d6; font-size: 3.9cqi; }
.a-search svg { width: 4.3cqi; height: 4.3cqi; }
.a-list { overflow: hidden; border-radius: 5.3cqi; background: #102a4c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.a-row { display: flex; align-items: center; gap: 2.9cqi; padding: 2.9cqi 3.9cqi; animation: row 700ms var(--ease-out) both; }
.a-row + .a-row { position: relative; }
.a-row + .a-row::before { content: ""; position: absolute; left: 16.8cqi; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .08); }
.a-row:nth-child(1) { animation-delay: 1400ms; }
.a-row:nth-child(2) { animation-delay: 1500ms; }
.a-row:nth-child(3) { animation-delay: 1600ms; }
.a-row:nth-child(4) { animation-delay: 1700ms; }
.a-row > span:nth-child(2) { flex: 1; min-width: 0; }
.a-row b { display: block; font-size: 4.1cqi; font-weight: 600; }
.a-row small { display: block; overflow: hidden; font-size: 3cqi; color: #afc0d6; white-space: nowrap; text-overflow: ellipsis; }
.ri { display: grid; place-items: center; flex: none; width: 10cqi; height: 10cqi; border-radius: 2.9cqi; background: rgba(63, 208, 193, .16); color: #3fd0c1; }
.ri svg { width: 4.8cqi; height: 4.8cqi; }
.ri.new { background: rgba(255, 200, 92, .16); color: #ffc85c; }
.ri.off { background: rgba(255, 255, 255, .08); color: #afc0d6; }
.st { font-style: normal; font-size: 2.8cqi; font-weight: 700; padding: .8cqi 2.2cqi; border-radius: 99cqi; white-space: nowrap; }
.st.ok { background: rgba(63, 208, 193, .18); color: #7fe3d6; }
.st.new { background: rgba(255, 200, 92, .18); color: #ffd88a; }
.st.off { background: rgba(255, 255, 255, .1); color: #c9d6e6; }

/* Brand mark crescents (laptop sidebar, Teller header) */
.crescent { fill: var(--teal); transform-box: fill-box; transform-origin: center; animation: assemble 1100ms var(--ease-out) both; }
.crescent:nth-child(1) { animation-delay: 1000ms; }
.crescent:nth-child(2) { animation-delay: 1100ms; }
.crescent:nth-child(3) { animation-delay: 1200ms; }
@keyframes assemble { from { opacity: 0; transform: scale(.4) rotate(-120deg); } }

.app-icon {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(160deg, #173a66, var(--navy) 70%); color: var(--teal-bright);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px -12px rgba(11, 31, 58, .7);
  transition: transform 400ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.app-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Platform: the five apps as stations on one line. On wide screens the line fills with teal and each
   station lights up as the section scrolls into view (the default, without scroll timelines or with
   reduced motion, is the finished state). Hovering a station lifts its icon. */
@property --fill { syntax: "<percentage>"; initial-value: 100%; inherits: false; }
.flow { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 80px 0 0; padding: 0; color: var(--on-navy-muted); view-timeline: --flow block; }
.flow li { position: relative; display: flex; flex-direction: column; gap: 26px; padding-right: 28px; }
.node { position: relative; z-index: 1; display: flex; align-items: center; }
.node b { padding: 0 14px 0 12px; background: var(--navy-deep); font-size: 1rem; font-weight: 600; color: #fff; }
.flow li:not(:last-child)::after {
  content: ""; position: absolute; top: 21px; left: 44px; right: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(var(--teal-bright), var(--teal-bright)) 0 0 / var(--fill) 100% no-repeat, rgba(255, 255, 255, .12);
}
.flow .app-icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(127, 227, 214, .55), 0 0 0 4px rgba(0, 185, 168, .14); }
.flow-text { display: flex; flex-direction: column; gap: 8px; max-width: 24ch; }
.flow em { font-style: normal; font-size: 1.3rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.flow small { font-size: 0.92rem; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .flow li:hover .app-icon { transform: translateY(-3px); background: var(--teal); color: var(--navy); }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .flow .app-icon::after, .node b { animation-timeline: --flow; animation-fill-mode: both; animation-timing-function: linear; }
    .flow .app-icon::after { animation-name: lit; }
    .node b { animation-name: lit-name; }
    .flow li:nth-child(1)::after { animation: fill linear both; animation-timeline: --flow; animation-range: cover 25% cover 31.25%; }
    .flow li:nth-child(2)::after { animation: fill linear both; animation-timeline: --flow; animation-range: cover 31.25% cover 37.5%; }
    .flow li:nth-child(3)::after { animation: fill linear both; animation-timeline: --flow; animation-range: cover 37.5% cover 43.75%; }
    .flow li:nth-child(4)::after { animation: fill linear both; animation-timeline: --flow; animation-range: cover 43.75% cover 50%; }
    .flow li:nth-child(1) .app-icon::after, .flow li:nth-child(1) b { animation-range: cover 22% cover 25%; }
    .flow li:nth-child(2) .app-icon::after, .flow li:nth-child(2) b { animation-range: cover 31.25% cover 33%; }
    .flow li:nth-child(3) .app-icon::after, .flow li:nth-child(3) b { animation-range: cover 37.5% cover 39%; }
    .flow li:nth-child(4) .app-icon::after, .flow li:nth-child(4) b { animation-range: cover 43.75% cover 45.5%; }
    .flow li:nth-child(5) .app-icon::after, .flow li:nth-child(5) b { animation-range: cover 50% cover 52%; }
    @keyframes fill { from { --fill: 0%; } to { --fill: 100%; } }
    @keyframes lit { from { opacity: 0; } to { opacity: 1; } }
    @keyframes lit-name { from { color: var(--on-navy-muted); } to { color: #fff; } }
  }
}
@media (max-width: 960px) {
  /* Vertical line: icons in one column, text beside them */
  .flow { grid-template-columns: 1fr; margin-top: 48px; }
  .flow li { display: grid; grid-template-columns: 44px 1fr; align-items: start; column-gap: 16px; row-gap: 10px; padding: 0 0 36px; }
  .flow li:last-child { padding-bottom: 0; }
  .node { display: contents; }
  .node b { align-self: center; padding: 0; background: none; }
  .flow-text { grid-column: 2; max-width: none; }
  .flow li:not(:last-child)::after {
    top: 52px; bottom: 6px; left: 21px; right: auto; width: 2px; height: auto;
    background: linear-gradient(var(--teal-bright), var(--teal-bright)) 0 0 / 100% var(--fill) no-repeat, rgba(255, 255, 255, .12);
  }
}

/* Capabilities: sticky heading with one operation traced from the counter to the core; the list scrolls past it */
.split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: start; }
.split .sticky { position: sticky; top: 120px; }
.split .sticky h2 { margin: 0; }
.split .sticky .lead { margin: 20px 0 0; font-size: 1.1rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } .split .sticky { position: static; } }
.trace { max-width: 420px; margin-top: 40px; padding: 22px 24px 18px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line-dark), inset 0 1px 0 rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; }
.trace-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line-dark); }
.trace-top b { display: block; color: #fff; }
.trace-top small { font-size: .85rem; color: var(--on-navy-muted); }
.trace-top em { font-style: normal; font-weight: 800; color: #fff; white-space: nowrap; }
.trace ol { list-style: none; margin: 0; padding: 6px 0 0; }
.trace li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 10px 30px; font-size: .95rem; color: #fff; }
.trace li::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 185, 168, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ad4c3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.trace li:not(:last-child)::after { content: ""; position: absolute; left: 8.5px; top: 32px; bottom: -10px; width: 1px; background: rgba(42, 212, 195, .35); }
.trace time { color: var(--on-navy-muted); font-size: .85rem; }
.caps { list-style: none; margin: 0; padding: 0; }
.caps li { display: grid; grid-template-columns: 28px 1fr; gap: 24px; padding: 32px 0; border-top: 1px solid var(--line); }
.caps li:last-child { border-bottom: 1px solid var(--line); }
.caps p { color: var(--muted); margin: 0; }
.icon { width: 28px; height: 28px; display: grid; place-items: center; color: var(--teal-bright); }
.icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Business models: six equal tiles. The active one fills with teal from the bottom: only the hovered tile
   with a mouse (so crossing the gaps lights nothing), the first tile on touch screens. */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 72px 0 0; padding: 0; }
.bento li { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; min-height: 260px; padding: 30px; border-radius: 22px; background: linear-gradient(180deg, #0f2747, #0a1c34); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .08); }
.bento li::before { content: ""; position: absolute; z-index: -2; inset: 0; background: var(--teal); clip-path: inset(100% 0 0 0); transition: clip-path 600ms var(--ease-out); }
.bento h3 { margin: 0; max-width: 11ch; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.08; transition: color 300ms ease, transform 500ms var(--ease-out); }
.bento p { margin: 0; max-width: 30ch; font-size: .98rem; color: var(--on-navy-muted); transition: color 300ms ease; }
.bento-mark { position: absolute; z-index: -1; right: -10%; bottom: -24%; width: 58%; max-width: 260px; opacity: .05; transition: opacity 400ms ease, transform 700ms var(--ease-out); }
.bento-mark .crescent { fill: #fff; animation: none; transition: fill 300ms ease; }
@media (hover: hover) and (pointer: fine) {
  .bento li:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
  .bento li:hover::before { clip-path: inset(0 0 0 0); }
  .bento li:hover h3 { color: var(--navy); transform: translateY(-2px); }
  .bento li:hover p { color: #0b2a3d; }
  .bento li:hover .bento-mark { opacity: .12; transform: rotate(-10deg) scale(1.06); }
  .bento li:hover .crescent { fill: var(--navy); }
}
@media (hover: none) {
  .bento li:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
  .bento li:first-child::before { clip-path: inset(0 0 0 0); }
  .bento li:first-child h3 { color: var(--navy); transform: translateY(-2px); }
  .bento li:first-child p { color: #0b2a3d; }
  .bento li:first-child .bento-mark { opacity: .12; transform: rotate(-10deg) scale(1.06); }
  .bento li:first-child .crescent { fill: var(--navy); }
}
@media (max-width: 960px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bento li { min-height: 230px; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; } .bento li { min-height: 212px; gap: 28px; padding: 26px; } }

/* Closing dark block: Frame Banking + contact + footer */
.frame { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 0; border-block: 1px solid var(--line-dark); }
.frame .text { max-width: 640px; }
.frame p { margin: 0; }

.contact { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; margin-top: 120px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 32px; margin-top: 80px; } }
.contact h2 em { font-style: normal; color: var(--teal); }
.form { --focus: var(--teal-ink); --ink: #0b1f3a; --muted: #4a5b70; --bg: #fff; --link: var(--teal-ink); background: var(--bg); color: var(--ink); border-radius: 20px; padding: 32px; display: grid; gap: 18px; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
.form label { display: grid; gap: 6px; font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.form .optional { font-weight: 500; color: var(--muted); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } .form { padding: 24px; } }
.form input, .form textarea {
  font: inherit; font-size: 1rem; font-weight: 500; color: var(--ink); width: 100%;
  padding: 12px 13px; border: 1px solid transparent; border-radius: 12px; background: var(--bg-soft); /* border shows in forced colors */
  box-shadow: inset 0 0 0 1px var(--line-field);
  transition: box-shadow 200ms ease, background-color 200ms ease;
}
.form textarea { min-height: 140px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid transparent; background: var(--bg); box-shadow: inset 0 0 0 2px var(--teal-ink), 0 0 0 4px rgba(0, 185, 168, .15); }
/* Chrome paints autofilled fields light blue; keep them like the other fields */
.form input:-webkit-autofill { -webkit-text-fill-color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-field), inset 0 0 0 100px var(--bg-soft); }
.form input:-webkit-autofill:focus { box-shadow: inset 0 0 0 2px var(--teal-ink), inset 0 0 0 100px var(--bg), 0 0 0 4px rgba(0, 185, 168, .15); }
.form input:user-invalid:not(:focus), .form textarea:user-invalid:not(:focus) { box-shadow: inset 0 0 0 2px #c62828; } /* not while typing */
/* country: native searchable list (<datalist>) with a chevron; Chrome's own list button sits invisibly over it */
.form input[list] { padding-right: 40px; background: var(--bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5b70' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; }
.form input[list]:focus { background-color: var(--bg); }
.form ::placeholder { color: var(--muted); opacity: 1; }
.form input[list]::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.form .btn { justify-self: start; }
.form .btn:disabled { opacity: .7; cursor: progress; }
.form .consent { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; }
.form .consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; padding: 0; box-shadow: none; accent-color: var(--teal-ink); }
.form .consent input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.form .consent input:user-invalid:not(:focus) { box-shadow: none; outline: 2px solid #c62828; outline-offset: 2px; }
.trap { position: absolute; left: -9999px; }
.form-msg { display: none; padding: 14px 16px; border-radius: 12px; font-weight: 700; outline: none; } /* focused by form.js so screen readers read it */
.form-msg:target { display: block; animation: rise 500ms var(--ease-out) both; }
#contacto-ok:target ~ * { display: none; } /* sent: only the confirmation stays */
#contacto-ok { background: #e3f6f3; color: #00564f; }
#contacto-error, #contacto-invalido { background: #fdecec; color: #8a1c1c; }

.footer { padding: 36px 0 44px; border-top: 1px solid var(--line-dark); font-size: 0.95rem; color: var(--on-navy-muted); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.footer a { color: var(--on-navy); text-decoration: none; transition: color 200ms ease; }
.footer p { margin: 0; color: var(--on-navy-muted); }
.footer .logo img { width: 116px; }
@media (hover: hover) and (pointer: fine) { .footer a:hover { color: var(--teal); } }

/* Reduced motion: keep fades, drop movement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .tilt { animation: none !important; }
}

/* Legal pages */
.legal { padding: 72px 0 96px; background: var(--bg); }
.legal .wrap { max-width: 800px; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-bottom: 8px; }
.legal h2 { font-size: 1.45rem; margin: 48px 0 12px; }
.legal h3 { margin: 24px 0 8px; }
.legal .updated { color: var(--muted); font-size: 0.95rem; margin-bottom: 28px; }
.legal ul { padding-left: 22px; margin: 0 0 16px; }
.legal li { margin-bottom: 6px; }
.footer a[aria-current] { color: var(--teal); }

/* 404 */
.notfound { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
.notfound img { width: 72px; margin: 0 auto 32px; }
.notfound .actions { justify-content: center; }