:root { --navy:#0d2b5b; --deep:#061d40; --orange:#ff7a00; --ink:#17263a; --muted:#596879; --line:#dfe5eb; --surface:#f5f7f9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:78px; }
body { margin:0; font-family:Inter,Arial,sans-serif; color:var(--ink); line-height:1.55; background:#fff; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
img { display:block; max-width:100%; }
h1,h2,h3,p { margin-top:0; }
h2 { font-size:clamp(2rem,3.5vw,3.25rem); line-height:1.13; letter-spacing:0; color:var(--navy); margin-bottom:0; }
.container { width:min(100% - 80px,1280px); margin-inline:auto; }
.section { padding:104px 0; }
.section-kicker,.eyebrow { margin:0 0 21px; color:var(--orange); font-size:12px; font-weight:800; letter-spacing:.11em; }

.site-header { height:78px; background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:30; }
.header-inner { height:100%; display:flex; align-items:center; gap:35px; }
.brand { display:flex; width:170px; flex:none; }
.nav-links { display:flex; gap:31px; margin-left:auto; align-items:center; }
.nav-links a { font-size:13px; font-weight:700; color:var(--navy); white-space:nowrap; transition:color .2s; }
.nav-links a:hover,.nav-links a:focus-visible { color:var(--orange); }
.header-cta { min-height:40px; display:inline-flex; align-items:center; gap:16px; padding:0 17px; background:var(--orange); color:#fff; font-size:13px; font-weight:800; white-space:nowrap; }
.header-cta:hover,.button-primary:hover,.contact-action:hover { background:#e66e00; }
.menu-button { display:none; background:none; border:1px solid var(--line); width:42px; height:42px; align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; }
.menu-button span { width:18px; height:2px; background:var(--navy); }

.hero { position:relative; min-height:min(710px,calc(100svh - 78px)); color:#fff; background:#071b35 url('assets/banking-infrastructure-hero.png') center / cover no-repeat; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,17,38,.96) 0%,rgba(3,17,38,.88) 30%,rgba(3,17,38,.46) 65%,rgba(3,17,38,.04) 100%); }
.hero::after { content:""; position:absolute; inset:0; border-bottom:5px solid var(--orange); pointer-events:none; }
.hero-inner { min-height:inherit; position:relative; z-index:1; display:flex; align-items:center; }
.hero-copy { max-width:685px; padding:70px 0 85px; }
.hero-eyebrow { color:#fff; display:flex; gap:12px; align-items:center; margin-bottom:24px; }
.eyebrow-line { display:inline-block; width:29px; height:2px; background:var(--orange); }
.hero h1 { font-size:clamp(4.6rem,8vw,8rem); font-weight:800; line-height:.9; letter-spacing:0; margin:0 0 21px; }
.hero h1 span { color:var(--orange); }
.hero-title-detail { max-width:690px; margin:0 0 20px; font-size:clamp(1.65rem,3.1vw,2.9rem); font-weight:700; line-height:1.17; }
.hero-title-detail em { color:#ff9a2d; font-style:normal; }
.hero-lede { max-width:595px; margin:0; color:#d4dce8; font-size:16px; line-height:1.75; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.button { min-height:50px; display:inline-flex; align-items:center; justify-content:space-between; gap:24px; padding:0 19px; font-size:13px; font-weight:800; transition:background .2s,border-color .2s; }
.button-primary { background:var(--orange); color:#fff; }
.button-outline { border:1px solid rgba(255,255,255,.6); color:#fff; }
.button-outline:hover { background:rgba(255,255,255,.12); }
.hero-caption { position:absolute; bottom:24px; left:0; right:0; margin:0; display:flex; justify-content:space-between; color:#c8d1dd; font-size:10px; font-weight:700; letter-spacing:.12em; }
.focus-strip { background:#fff; border-bottom:1px solid var(--line); }
.focus-inner { min-height:96px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.focus-inner strong { font-size:14px; color:var(--navy); }
.focus-items { display:flex; flex-wrap:wrap; }
.focus-items span { padding:0 16px; border-left:1px solid var(--line); color:var(--muted); font-size:12px; font-weight:700; white-space:nowrap; }
.focus-items span:last-child { padding-right:0; }

.section-heading { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.7fr); align-items:end; gap:75px; margin-bottom:47px; }
.section-heading h2 { max-width:740px; }
.section-heading>p { max-width:445px; margin:0 0 4px; color:var(--muted); font-size:15px; line-height:1.8; }
.architecture-section { position:relative; isolation:isolate; overflow:hidden; background:#f7fafc; }
.architecture-section::before { content:""; position:absolute; z-index:0; top:0; left:0; right:0; height:960px; background:url('assets/banking-operations-background.jpg') center top / cover no-repeat; opacity:.18; mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%); pointer-events:none; }
.architecture-section>.container { position:relative; z-index:1; }
.architecture-map { display:grid; grid-template-columns:minmax(0,1fr) 236px; border:1px solid var(--line); box-shadow:0 18px 55px rgba(13,43,91,.06); }
.architecture-main { min-width:0; }
.architecture-row { border-bottom:1px solid var(--line); background:#fff; }
.architecture-row:last-child { border-bottom:0; }
.layer-trigger { width:100%; min-height:117px; display:grid; grid-template-columns:260px minmax(0,1fr) 52px; align-items:stretch; padding:0; border:0; background:#fff; color:inherit; text-align:left; cursor:pointer; }
.layer-trigger:hover,.layer-trigger[aria-expanded="true"] { background:#f0f6fc; }
.layer-trigger:focus-visible { outline:2px solid var(--orange); outline-offset:-3px; }
.architecture-row.is-open { box-shadow:inset 3px 0 var(--orange); }
.layer-title { display:flex; align-items:center; gap:18px; padding:18px 20px 18px 26px; border-right:1px solid var(--line); }
.layer-number { display:grid; place-items:center; width:37px; height:37px; flex:none; background:#eaf0f6; color:var(--navy); font-size:11px; font-weight:800; }
.architecture-row.is-open .layer-number { background:var(--orange); color:#fff; }
.layer-title small { display:block; color:#718092; font-size:9px; font-weight:800; letter-spacing:.08em; margin-bottom:4px; }
.layer-title strong { display:block; color:var(--navy); font-size:16px; line-height:1.3; }
.layer-items { display:flex; align-items:center; align-content:center; flex-wrap:wrap; gap:9px; padding:17px 21px; }
.layer-items span { display:inline-flex; align-items:center; min-height:32px; padding:5px 10px; border:1px solid #d8e2ec; background:#f8fafc; color:#274563; font-size:11px; font-weight:700; line-height:1.25; }
.architecture-row.is-open .layer-items span { background:#fff; border-color:#c9d9ea; }
.layer-chevron { align-self:center; justify-self:center; color:var(--navy); font-size:27px; line-height:1; transform:translateY(-4px); transition:transform .2s; }
.layer-trigger[aria-expanded="true"] .layer-chevron { transform:rotate(180deg) translateY(4px); color:var(--orange); }
.layer-detail { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:21px 26px; border-top:1px solid var(--line); background:#f8fbfe; }
.layer-detail[hidden] { display:none; }
.layer-detail p { max-width:680px; margin:0; color:#40566f; font-size:13px; line-height:1.7; }
.layer-detail a { flex:none; color:var(--navy); border-bottom:2px solid var(--orange); padding:7px 0; font-size:12px; font-weight:800; }
.layer-detail a:hover { color:#bc5800; }
.architecture-side { background:var(--navy); color:#fff; display:flex; flex-direction:column; justify-content:space-between; padding:28px 25px; }
.side-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid rgba(255,255,255,.3); color:var(--orange); font-size:25px; margin-bottom:25px; }
.architecture-side small,.side-bottom span { display:block; color:#ffab58; font-size:10px; font-weight:800; letter-spacing:.08em; }
.architecture-side h3 { font-size:21px; line-height:1.2; margin:9px 0 14px; }
.architecture-side p { color:#c7d4e5; font-size:12px; line-height:1.75; margin:0; }
.side-link { display:inline-flex; align-items:center; gap:8px; margin-top:22px; padding-bottom:5px; border-bottom:2px solid var(--orange); color:#fff; font-size:11px; font-weight:800; }
.side-link:hover { color:#ffbf83; }
.side-bottom { border-top:1px solid rgba(255,255,255,.24); padding-top:20px; }
.side-bottom strong { display:block; font-size:11px; line-height:1.7; font-weight:600; margin-top:10px; }
.diagram-note { font-size:11px; color:#798797; margin:13px 0 0; }

.solutions-section { background:#edf2f6; }
.solution-tabs { display:flex; gap:0; margin-bottom:28px; border-bottom:1px solid #cad6e2; }
.solution-tabs button { min-height:52px; padding:0 27px; border:0; border-bottom:3px solid transparent; background:transparent; color:#66778b; font-size:14px; font-weight:800; cursor:pointer; }
.solution-tabs button:hover { color:var(--navy); }
.solution-tabs button[aria-selected="true"] { border-bottom-color:var(--orange); color:var(--navy); }
.solution-tabs button:focus-visible { outline:2px solid var(--orange); outline-offset:-4px; }
.solution-panel[hidden] { display:none; }
.capability-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #d7e0e9; border-left:1px solid #d7e0e9; }
.capability { min-height:328px; padding:33px 37px 31px; border-right:1px solid #d7e0e9; border-bottom:1px solid #d7e0e9; background:#fff; transition:background .2s; }
.capability:hover { background:#fbfdff; }
.capability-index { display:block; margin-bottom:33px; color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.1em; }
.capability h3 { font-size:23px; line-height:1.2; color:var(--navy); margin-bottom:12px; }
.capability p { max-width:470px; font-size:13px; color:var(--muted); line-height:1.75; margin-bottom:20px; }
.capability ul { display:flex; gap:7px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.capability li { padding:6px 9px; background:#eef3f8; color:#315271; font-size:10px; font-weight:700; }
.enterprise-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid #d7e0e9; border-left:1px solid #d7e0e9; }
.enterprise-item { min-height:231px; padding:30px; border-right:1px solid #d7e0e9; border-bottom:1px solid #d7e0e9; background:#fff; }
.enterprise-item>span { display:block; margin-bottom:31px; color:var(--orange); font-size:10px; font-weight:800; letter-spacing:.1em; }
.enterprise-item h3 { margin-bottom:11px; color:var(--navy); font-size:19px; line-height:1.25; }
.enterprise-item p { max-width:340px; margin:0; color:var(--muted); font-size:13px; line-height:1.7; }

.infrastructure-section { background:var(--deep); color:#fff; }
.infrastructure-inner { display:grid; grid-template-columns:minmax(0,.88fr) minmax(0,1fr); gap:110px; }
.infrastructure-copy { padding-top:8px; }
.infrastructure-copy h2 { color:#fff; max-width:530px; margin-bottom:20px; }
.infrastructure-copy>p:not(.section-kicker) { max-width:490px; color:#c9d4e2; font-size:15px; line-height:1.8; }
.text-link { display:inline-flex; align-items:center; gap:40px; border-bottom:2px solid var(--orange); padding:12px 0; color:#fff; font-size:13px; font-weight:800; margin-top:14px; }
.text-link span { color:var(--orange); }
.infrastructure-list { border-top:1px solid rgba(255,255,255,.23); }
.infrastructure-list>div { display:grid; grid-template-columns:35px minmax(0,1fr); column-gap:14px; align-items:start; padding:21px 0; border-bottom:1px solid rgba(255,255,255,.23); }
.infrastructure-list span { grid-row:span 2; color:var(--orange); font-size:11px; font-weight:800; padding-top:3px; }
.infrastructure-list h3 { margin:0 0 6px; font-size:16px; color:#fff; }
.infrastructure-list p { margin:0; color:#b8c7d9; font-size:12px; }

.approach-section { background:#eef3f7; }
.approach-photo { height:clamp(190px,22vw,290px); margin:0 0 32px; overflow:hidden; }
.approach-photo img { width:100%; height:100%; object-fit:cover; object-position:center 43%; }
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:2px solid var(--navy); }
.steps article { padding:26px 26px 0 0; min-height:204px; border-right:1px solid var(--line); }
.steps article+article { padding-left:26px; }
.steps article:last-child { border-right:0; }
.steps span { display:block; color:var(--orange); font-weight:800; font-size:12px; margin-bottom:28px; }
.steps h3 { font-size:19px; color:var(--navy); margin-bottom:8px; }
.steps p { font-size:12px; color:var(--muted); line-height:1.75; margin:0; }
.contact-section { background:#f0f4f8; border-top:1px solid var(--line); padding:75px 0; }
.contact-inner { display:flex; align-items:center; justify-content:space-between; gap:60px; }
.contact-inner h2 { max-width:720px; margin-bottom:16px; }
.contact-inner p:not(.section-kicker) { max-width:560px; color:var(--muted); font-size:14px; margin:0; }
.contact-action { display:flex; align-items:center; justify-content:space-between; gap:38px; min-width:216px; min-height:53px; padding:0 18px; background:var(--orange); color:#fff; font-size:13px; font-weight:800; white-space:nowrap; }
.site-footer { background:var(--deep); color:#c5d0df; padding:30px 0; }
.footer-inner { display:flex; align-items:center; gap:30px; }
.footer-inner img { width:148px; }
.footer-inner p { font-size:11px; margin:0 auto 0 0; }
.footer-inner a { font-size:11px; font-weight:700; }
.footer-inner a:hover { color:#fff; }
.footer-office { display:flex; align-items:end; justify-content:space-between; gap:30px; border-top:1px solid rgba(255,255,255,.18); padding-top:26px; margin-top:28px; }
.footer-label { display:block; margin-bottom:9px; color:#ffad62; font-size:10px; font-weight:800; letter-spacing:.1em; }
.footer-office address { color:#fff; font-size:14px; font-style:normal; line-height:1.6; }
.footer-office>a { color:#fff; font-size:14px; font-weight:700; white-space:nowrap; }
.footer-office>a:hover { color:#ffad62; }

@media(max-width:1100px) {
  .container { width:min(100% - 48px,1280px); }
  .nav-links { gap:18px; }
  .nav-links a { font-size:12px; }
  .brand { width:145px; }
  .infrastructure-inner { gap:60px; }
  .architecture-map { grid-template-columns:minmax(0,1fr) 220px; }
  .layer-trigger { grid-template-columns:225px minmax(0,1fr) 42px; }
}
@media(max-width:820px) {
  .site-header { height:68px; }
  .header-inner { width:calc(100% - 40px); }
  .brand { width:140px; }
  .header-cta { margin-left:auto; }
  .menu-button { display:flex; }
  .nav-links { display:none; position:absolute; left:0; right:0; top:68px; background:#fff; padding:13px 20px 18px; box-shadow:0 16px 25px rgba(6,29,64,.13); border-bottom:1px solid var(--line); }
  .site-header.is-open .nav-links { display:grid; gap:0; }
  .nav-links a { padding:12px 0; font-size:14px; }
  .hero { min-height:650px; }
  .hero::before { background:linear-gradient(90deg,rgba(3,17,38,.97),rgba(3,17,38,.78) 65%,rgba(3,17,38,.35)); }
  .focus-inner { align-items:flex-start; flex-direction:column; justify-content:center; padding-block:23px; gap:11px; }
  .focus-items span:first-child { border-left:0; padding-left:0; }
  .section { padding:76px 0; }
  .section-heading { gap:24px; grid-template-columns:1fr; }
  .section-heading>p { max-width:620px; }
  .architecture-map { grid-template-columns:1fr; }
  .architecture-side { min-height:190px; display:grid; grid-template-columns:1fr 1fr; gap:26px; }
  .side-icon { margin-bottom:15px; }
  .side-bottom { border-top:0; border-left:1px solid rgba(255,255,255,.24); padding:0 0 0 24px; align-self:end; }
  .infrastructure-inner { grid-template-columns:1fr; gap:45px; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .steps article:nth-child(2) { border-right:0; }
  .steps article:nth-child(n+3) { border-top:1px solid var(--line); }
  .enterprise-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  html { scroll-padding-top:68px; }
  .container { width:calc(100% - 38px); }
  .header-inner { width:calc(100% - 38px); }
  .header-cta { display:none; }
  .hero { min-height:660px; background-position:60% center; }
  .hero::before { background:linear-gradient(90deg,rgba(3,17,38,.97),rgba(3,17,38,.77)); }
  .hero-copy { padding:60px 0 80px; }
  .hero h1 { font-size:clamp(4.4rem,19vw,6rem); }
  .hero-title-detail { font-size:clamp(1.65rem,7vw,2.15rem); }
  .hero-lede { font-size:14px; line-height:1.7; }
  .hero-actions { gap:10px; }
  .button { width:100%; min-height:48px; }
  .hero-caption { bottom:20px; font-size:8px; gap:20px; }
  .focus-inner { min-height:0; }
  .focus-inner strong { font-size:13px; }
  .focus-items { row-gap:8px; }
  .focus-items span { font-size:10px; padding:0 8px; }
  .section { padding:67px 0; }
  .section-kicker { margin-bottom:17px; font-size:10px; }
  .section-heading { margin-bottom:30px; }
  .section-heading h2 { font-size:clamp(1.9rem,8vw,2.5rem); }
  .section-heading>p { font-size:13px; }
  .architecture-section::before { height:720px; opacity:.13; }
  .architecture-map { border:0; box-shadow:none; }
  .architecture-row { margin-bottom:8px; border:1px solid var(--line); }
  .layer-trigger { position:relative; display:block; min-height:0; }
  .layer-title { border-right:0; border-bottom:1px solid var(--line); padding:15px; }
  .layer-items { padding:13px 15px; }
  .layer-title strong { font-size:15px; }
  .layer-chevron { position:absolute; top:16px; right:16px; }
  .layer-detail { display:block; padding:17px 15px 20px; }
  .layer-detail a { display:inline-block; margin-top:13px; }
  .architecture-side { display:block; padding:22px; }
  .side-bottom { border-left:0; border-top:1px solid rgba(255,255,255,.24); padding:17px 0 0; margin-top:22px; }
  .side-icon { margin-bottom:12px; }
  .diagram-note { line-height:1.5; }
  .capability-grid { grid-template-columns:1fr; }
  .capability { min-height:0; padding:27px 22px; }
  .capability-index { margin-bottom:22px; }
  .capability h3 { font-size:20px; }
  .solution-tabs { margin-bottom:22px; }
  .solution-tabs button { width:50%; padding:0 12px; font-size:13px; }
  .enterprise-grid { grid-template-columns:1fr; }
  .enterprise-item { min-height:0; padding:25px 22px; }
  .enterprise-item>span { margin-bottom:20px; }
  .infrastructure-inner { gap:35px; }
  .infrastructure-copy h2 { font-size:clamp(1.9rem,8vw,2.5rem); }
  .steps { grid-template-columns:1fr; }
  .approach-photo { height:190px; margin-bottom:23px; }
  .steps article,.steps article+article { min-height:0; padding:20px 0 22px; border-right:0; border-bottom:1px solid var(--line); }
  .steps article:nth-child(n+3) { border-top:0; }
  .steps span { margin-bottom:12px; }
  .contact-section { padding:63px 0; }
  .contact-inner { display:block; }
  .contact-inner h2 { font-size:clamp(1.9rem,8vw,2.5rem); }
  .contact-action { margin-top:27px; min-width:0; width:100%; }
  .footer-inner { flex-wrap:wrap; gap:12px; }
  .footer-inner img { width:130px; }
  .footer-inner p { order:3; width:100%; }
  .footer-inner a { margin-left:auto; }
  .footer-office { align-items:start; flex-direction:column; gap:14px; margin-top:22px; padding-top:22px; }
  .footer-office address,.footer-office>a { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition-duration:.01ms!important; animation-duration:.01ms!important; } }