:root {
  --ink: #07172f;
  --ink-2: #102849;
  --text: #1d2a3c;
  --muted: #68778b;
  --line: #d9e2ea;
  --paper: #f6f8f8;
  --white: #ffffff;
  --mint: #3b82f6;
  --mint-dark: #1d4ed8;
  --blue: #2563eb;
  --cyan: #60a5fa;
  --radius: 1.25rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: "DM Sans", "Noto Sans", "Noto Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body[data-lang="vi"] { font-family: "Noto Sans", sans-serif; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 99; padding: .75rem 1rem; background: var(--white); border-radius: .5rem; }
.skip-link:focus { top: 1rem; }
.page-shell { overflow: hidden; }

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  width: 100%;
  height: 92px;
  margin: auto;
  padding: 0 max(1.5rem, calc((100vw - 1240px)/2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--white);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: height .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled { height: 72px; background: rgba(7,23,47,.98); border-bottom-color: rgba(96,165,250,.18); box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; }
.brand-word { font-size: .94rem; font-weight: 700; letter-spacing: .15em; }
.brand-tech { margin-left: .12em; color: var(--mint); font-size: .72em; font-weight: 600; letter-spacing: .04em; }
.brand-mark { width: 27px; height: 22px; display: flex; align-items: flex-end; gap: 3px; transform: skew(-10deg); }
.brand-mark span { width: 7px; border-radius: 2px; background: var(--mint); }
.brand-mark span:nth-child(1) { height: 15px; }
.brand-mark span:nth-child(2) { height: 22px; }
.brand-mark span:nth-child(3) { height: 11px; }
.desktop-nav { display: flex; gap: 2.2rem; margin-left: auto; margin-right: 3rem; }
.desktop-nav a { position: relative; font-size: .86rem; color: #d9e4f2; text-decoration: none; }
.desktop-nav a::after { content: ""; position: absolute; left: 0; bottom: -.35rem; width: 0; height: 1px; background: var(--mint); transition: width .25s ease; }
.desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.language-picker { position: relative; flex: 0 0 auto; }
.language-trigger { width:136px; height:42px; padding:0 .65rem; display:flex; align-items:center; gap:.5rem; border:1px solid rgba(96,165,250,.42); border-radius:.65rem; color:#f3f7fb; background:rgba(5,24,51,.78); font:inherit; cursor:pointer; box-shadow:inset 0 0 0 1px rgba(37,99,235,.1); transition:border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.language-trigger:hover, .language-trigger[aria-expanded="true"] { border-color: var(--mint); background: rgba(7,31,63,.96); box-shadow: 0 0 0 3px rgba(59,130,246,.14); }
.language-trigger:focus-visible, .language-option:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.language-globe { width: 18px; height: 18px; fill: none; stroke: var(--mint); stroke-width: 1.45; stroke-linecap: round; }
.language-current { flex:1; min-width:0; text-align:left; white-space:nowrap; font-size:.78rem; font-weight:600; letter-spacing:.02em; }
.language-chevron { width: 15px; height: 15px; fill: none; stroke: #9db0c6; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.language-trigger[aria-expanded="true"] .language-chevron { transform: rotate(180deg); }
.language-menu { position:absolute; top:calc(100% + .55rem); right:0; z-index:30; width:152px; padding:.35rem; border:1px solid rgba(96,165,250,.3); border-radius:.7rem; background:#081c38; box-shadow:0 18px 38px rgba(0,0,0,.34); }
.language-menu[hidden] { display: none; }
.language-menu::before { content: ""; position: absolute; top: -5px; right: 23px; width: 9px; height: 9px; border-top: 1px solid rgba(96,165,250,.3); border-left: 1px solid rgba(96,165,250,.3); background: #081c38; transform: rotate(45deg); }
.language-option { position:relative; width:100%; min-height:40px; padding:.45rem .6rem; display:grid; grid-template-columns:1fr 18px; gap:.45rem; align-items:center; border:0; border-radius:.48rem; color:#cbd7e5; background:transparent; font:inherit; font-size:.78rem; text-align:left; cursor:pointer; }
.language-option:hover { color: #fff; background: rgba(255,255,255,.06); }
.language-option[aria-selected="true"] { color: #fff; background: rgba(59,130,246,.17); }
.language-option svg { width: 16px; height: 16px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.language-option[aria-selected="true"] svg { opacity: 1; }

.hero {
  min-height: 810px;
  padding: 155px max(1.5rem, calc((100vw - 1240px)/2)) 80px;
  display: flex;
  align-items: center;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(2,12,29,.78) 0%, rgba(2,15,36,.32) 58%, rgba(2,11,28,.08) 100%),
    linear-gradient(180deg, rgba(1,8,20,.25), rgba(1,8,20,.13) 65%, rgba(1,8,20,.55)),
    url("./hero-hcmc-financial.webp") center center / cover no-repeat;
}
.hero-copy {
  width: min(700px, 58vw);
  padding: 2.55rem 2.8rem 2.7rem;
  border: 0;
  border-radius: .35rem;
  background: rgba(35, 73, 158, .66);
  box-shadow: none;
}
.eyebrow, .section-kicker { margin: 0 0 1.3rem; font-size: .75rem; font-weight: 700; letter-spacing: .16em; color: var(--mint); }
.eyebrow { display: flex; align-items: center; gap: .75rem; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(59,130,246,.12); }
.hero h1, .section h2, .company h2 { margin: 0; font-size: clamp(3rem, 5.15vw, 5.15rem); line-height: 1.03; letter-spacing: -.045em; }
.hero h1 { font-size: clamp(3.15rem, 4.25vw, 4.45rem); text-shadow: 0 3px 22px rgba(0,0,0,.32); }
.hero h1 em { color: var(--mint); font-style: normal; }
.hero-lede { max-width: 680px; margin: 1.8rem 0 2.1rem; color: #c4d0df; font-size: 1.1rem; line-height: 1.75; }
.hero-copy .hero-lede { margin-bottom: 0; }
.signal-label, .console-head, .identity-row small { display: block; color: #7f94af; font-size: .62rem; font-weight: 700; letter-spacing: .14em; }

.trust-strip { width: min(1240px, calc(100% - 3rem)); margin: -1px auto 0; padding: 1.5rem 0; display: grid; grid-template-columns: 1.2fr repeat(3, 1fr); border-bottom: 1px solid var(--line); gap: 1rem; align-items: center; }
.trust-strip p { margin: 0; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.trust-strip div { display: flex; gap: .7rem; align-items: baseline; }
.trust-strip span { color: var(--mint-dark); font-size: .68rem; font-weight: 700; }
.trust-strip b { font-size: .8rem; color: #36465a; }

.section { width: min(1240px, calc(100% - 3rem)); margin: auto; padding: 8rem 0; }
.section-heading { display: grid; grid-template-columns: .75fr 1.35fr .9fr; gap: 2rem; align-items: start; margin-bottom: 4rem; }
.section-heading .section-kicker { grid-column: 1; }.section-heading h2 { grid-column: 2; font-size: clamp(2.4rem, 4vw, 4.25rem); color: var(--ink); }
.section-heading > p:last-child { grid-column: 3; margin: .45rem 0 0; color: var(--muted); }
.solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.solution-card { position: relative; min-height: 510px; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.6); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.solution-card:hover { transform: translateY(-5px); border-color: #93b4e8; box-shadow: 0 22px 50px rgba(7,23,47,.08); }
.solution-card.featured { color: var(--white); background: var(--ink); border-color: var(--ink); }
.card-number { position: absolute; top: 1.8rem; right: 2rem; color: #96a4b4; font-size: .72rem; }
.card-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: .8rem; background: #e8f1ff; }
.featured .card-icon { background: rgba(59,130,246,.14); }
.card-icon svg { width: 29px; fill: none; stroke: var(--mint-dark); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.featured .card-icon svg { stroke: var(--mint); }
.solution-card h3 { margin: 2.2rem 0 1rem; max-width: 290px; font-size: 1.55rem; line-height: 1.25; color: var(--ink); }.featured h3 { color: var(--white); }
.solution-card > p { color: var(--muted); }.featured > p { color: #b9c8da; }
.solution-card ul { margin: 1.7rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.featured ul { border-color: rgba(255,255,255,.12); }
.solution-card li { position: relative; padding: .38rem 0 .38rem 1.2rem; font-size: .83rem; color: #4a5b6f; }.featured li { color: #d5dfeb; }
.solution-card li::before { content: ""; position: absolute; left: 0; top: .9rem; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }

.platform { width: 100%; padding: 8rem max(1.5rem, calc((100vw - 1240px)/2)); display: grid; grid-template-columns: 1fr 1fr; gap: 7rem; color: var(--white); background: var(--ink); }
.section-kicker.light { color: var(--mint); }.platform h2 { font-size: clamp(2.7rem, 4.3vw, 4.6rem); }
.platform-copy > p:nth-of-type(2) { max-width: 580px; color: #aebed1; font-size: 1.03rem; }
.principles { margin-top: 3rem; border-top: 1px solid rgba(255,255,255,.12); }
.principles > div { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.principles > div > span { color: var(--mint); font-size: .72rem; }
.principles p { margin: 0; display: flex; justify-content: space-between; gap: 1rem; }.principles b { font-size: .95rem; }.principles small { max-width: 330px; color: #9bb0c7; font-size: .78rem; }
.decision-console { align-self: center; padding: 1.2rem; border: 1px solid rgba(255,255,255,.15); border-radius: 1.25rem; background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.025)); box-shadow: 0 28px 60px rgba(0,0,0,.26); }
.console-head { display: flex; justify-content: space-between; padding: .3rem .2rem 1rem; }.live { display:flex; align-items:center; gap:.45rem; color: var(--mint); }.live i { width:6px; height:6px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }
.identity-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem; border-radius: .8rem; background: rgba(5,18,39,.55); }
.avatar-grid { width: 48px; height: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 5px; border: 1px solid rgba(59,130,246,.3); border-radius: 10px; }.avatar-grid span { border-radius: 3px; background: linear-gradient(145deg, #3479aa, #142946); }.avatar-grid span:nth-child(2), .avatar-grid span:nth-child(3) { background: linear-gradient(145deg, #3b82f6, #173b72); }
.identity-row strong { display:block; margin-top:.15rem; font-size:.9rem; letter-spacing:.06em; }.verified { padding:.35rem .65rem; border-radius:999px; color:var(--mint); background:rgba(59,130,246,.12); font-size:.7rem; }
.stack-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; padding:1rem 0; }
.stack-grid > div { min-height:112px; padding:1rem; border:1px solid rgba(255,255,255,.1); border-radius:.7rem; background:rgba(5,18,39,.42); }
.stack-grid small { display:block; margin-bottom:.55rem; color:var(--mint); font-size:.58rem; font-weight:700; letter-spacing:.13em; }
.stack-grid strong { display:block; color:#fff; font-size:.95rem; }
.stack-grid span { display:block; margin-top:.25rem; color:#8fa4bc; font-size:.67rem; }
.trace { height: 70px; display:flex; align-items:flex-end; gap:6px; padding: 0 1rem; opacity:.75; }.trace span { flex:1; height:30%; background:linear-gradient(90deg, rgba(59,130,246,.12), rgba(59,130,246,.82)); border-radius:2px; }.trace span:nth-child(2){height:58%}.trace span:nth-child(3){height:43%}.trace span:nth-child(4){height:76%}
.console-note { margin: .5rem 1rem 1rem; color:#7f93ab; font-size:.67rem; line-height:1.5; }

.insights .section-heading { grid-template-columns: .8fr 2.2fr; }.insights .section-heading h2 { grid-column: 2; }
.insight-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; }
.insight-lead { position: relative; min-height: 470px; padding: 2.5rem; overflow: hidden; border-radius: var(--radius); color: var(--white); background: linear-gradient(135deg, #113d64, #07172f 70%); }
.map-motif { position:absolute; inset:0; opacity:.55; }.map-motif svg { width:100%; height:100%; }.map-motif path { fill:none; stroke:#5b9cff; stroke-width:1; }.map-motif circle { fill:var(--mint); filter:drop-shadow(0 0 8px var(--mint)); }
.insight-lead > *:not(.map-motif) { position:relative; z-index:1; }
.insight-label { margin: 0 0 5.5rem; color:var(--mint); font-size:.7rem; font-weight:700; letter-spacing:.15em; }.insight-lead h3 { max-width:710px; margin:0; font-size:clamp(1.7rem,2.7vw,2.7rem); line-height:1.32; }.insight-lead > p:last-child { max-width:540px; margin:2rem 0 0; color:#9eb1c6; font-size:.78rem; }
.trend-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.trend-list article { display:grid; grid-template-columns:45px 1fr; gap:1rem; padding:1.7rem; border-bottom:1px solid var(--line); }.trend-list article:last-child { border-bottom:0; }.trend-list span { color:var(--mint-dark); font-size:.7rem; }.trend-list h3 { margin:0 0 .5rem; color:var(--ink); font-size:1.05rem; }.trend-list p { margin:0; color:var(--muted); font-size:.82rem; }

.partners { padding-top:6.5rem; }
.partner-heading { grid-template-columns:1fr; gap:.65rem; }
.partner-heading .section-kicker, .partner-heading h2, .partner-heading .partners-subtitle { grid-column:1; }
.partner-heading h2 { font-size:clamp(2.8rem,4.4vw,4.75rem); }
.partners-subtitle { max-width:720px; margin:.35rem 0 0; color:var(--muted); font-size:1rem; }
.partner-grid { display:grid; grid-template-columns:repeat(7,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); background:var(--white); }
.partner-card { min-width:0; min-height:132px; margin:0; padding:1.15rem .8rem .85rem; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; transition:background .2s ease, transform .2s ease, box-shadow .2s ease; }
.partner-card:hover { position:relative; z-index:1; background:#f4f8ff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(7,23,47,.09); }
.partner-card img { display:block; width:100%; max-width:118px; height:48px; object-fit:contain; }
.partner-card figcaption { color:#718096; font-size:.66rem; font-weight:600; line-height:1.2; text-align:center; }

.company { padding: 7rem max(1.5rem, calc((100vw - 1240px)/2)); color:var(--white); background:#0c2038; }
.company-inner { display:grid; grid-template-columns:1fr 1fr; gap:7rem; }
.company h2 { font-size:clamp(2.8rem,4.5vw,4.8rem); }.company-copy > p:last-child { max-width:570px; color:#aabbd0; }
.company-details dl { margin:0; }.company-details dl div { padding:1.1rem 0; border-bottom:1px solid rgba(255,255,255,.12); }.company-details dt { margin-bottom:.45rem; color:#7290ad; font-size:.64rem; font-weight:700; letter-spacing:.14em; }.company-details dd { margin:0; color:#e1e9f2; font-size:.9rem; }
.location-link { display:inline-block; margin-top:1.6rem; padding-bottom:.2rem; border-bottom:1px solid var(--mint); color:var(--mint); text-decoration:none; font-size:.82rem; }

.site-footer { width:min(1240px,calc(100% - 3rem)); margin:auto; padding:3.5rem 0 2rem; display:grid; grid-template-columns:1fr; gap:2rem; }
.footer-bottom { grid-column:1/-1; margin-top:1rem; padding-top:1.4rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:2rem; color:#7b8999; font-size:.7rem; }.footer-bottom p { margin:0; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease, transform .65s ease; }.reveal.visible { opacity:1; transform:none; }.delay-1 { transition-delay:.12s; }.delay-2 { transition-delay:.24s; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }

@media (max-width: 980px) {
  .desktop-nav { display:none; }
  .hero { padding-top:135px; background-position:62% center; }
  .hero-copy { width:min(660px,86vw); }
  .trust-strip { grid-template-columns:1fr 1fr; }
  .section-heading, .insights .section-heading { grid-template-columns:1fr; }.section-heading .section-kicker,.section-heading h2,.section-heading>p:last-child,.insights .section-heading h2 { grid-column:1; }
  .solution-grid { grid-template-columns:1fr; }.solution-card { min-height:unset; }
  .platform, .company-inner { grid-template-columns:1fr; gap:4rem; }
  .insight-layout { grid-template-columns:1fr; }
  .partner-grid { grid-template-columns:repeat(4,1fr); }
}

@media (max-width: 640px) {
  .site-header { width:100%; height:76px; padding:0 1rem; }.site-header.is-scrolled { height:66px; }.brand-word { font-size:.78rem; }.language-trigger { width:136px; height:40px; padding:0 .55rem; gap:.42rem; }.language-menu { width:142px; }
  .hero { min-height:760px; padding:110px 1rem 55px; background-position:68% center; }.hero-copy { width:100%; padding:2rem 1.45rem 2.2rem; }.hero h1 { font-size:clamp(2.55rem,12vw,3.55rem); }.hero-lede { font-size:.96rem; line-height:1.65; }.button { width:100%; justify-content:center; }
  .trust-strip { width:calc(100% - 2rem); grid-template-columns:1fr; gap:.65rem; padding:1.2rem 0; }.trust-strip p { margin-bottom:.5rem; }
  .section { width:calc(100% - 2rem); padding:5.5rem 0; }.section-heading { margin-bottom:2.5rem; }.section-heading h2 { font-size:2.55rem; }
  .solution-card { padding:1.5rem; }
  .platform,.company { padding:5.5rem 1rem; }.platform h2,.company h2 { font-size:2.7rem; }.principles p { display:block; }.principles small { display:block; margin-top:.3rem; }
  .decision-console { padding:.7rem; }.identity-row { grid-template-columns:45px 1fr; }.verified { grid-column:2; width:max-content; }.stack-grid { grid-template-columns:1fr; }
  .insight-lead { min-height:520px; padding:1.7rem; }.insight-label { margin-bottom:7rem; }.trend-list article { padding:1.4rem; }
  .partners { padding-top:5rem; }.partner-grid { grid-template-columns:repeat(2,1fr); }.partner-card { min-height:116px; padding:.9rem .65rem .75rem; }.partner-card img { max-width:108px; height:42px; }
  .company-inner { gap:3rem; }.site-footer { width:calc(100% - 2rem); grid-template-columns:1fr; }.footer-bottom { display:block; }.footer-bottom p+p { margin-top:.7rem; }
}