/* Fonts are loaded via + in each
page . Using @import here would serialise the font request behind this
stylesheet's own download. */
:root {
/* --------------------------------------------------------------------- */
/* Type scale. */
/* Line heights are sized for Vietnamese stacked diacritics: uppercase */
/* Ữ/Ấ/Ộ/Ỗ reach 1.163em above the baseline and descenders fall 0.213em */
/* below, so two consecutive lines need ~1.38em before ink collides. */
/* Headings sit at 1.25–1.3 because their tracking is negative and their */
/* wraps are short; body copy gets the full 1.7. */
/* --------------------------------------------------------------------- */
--fs-display: clamp(2.5rem, 4.5vw, 3.75rem);
--fs-h2: clamp(2rem, 3vw, 2.75rem);
--fs-h2-sm: clamp(1.5rem, 2.4vw, 2rem);
--fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
--fs-h4: clamp(1.125rem, 1.4vw, 1.25rem);
--fs-body-lg: 1.125rem;
--fs-body: 1rem;
--fs-sm: 0.875rem; /* 14px — floor for anything meant to be read */
--fs-caption: 0.75rem; /* 12px — absolute floor, secondary labels only */
--lh-display: 1.25;
--lh-h2: 1.28;
--lh-h3: 1.35;
--lh-body: 1.7;
--lh-tight: 1.45; /* dense UI rows, still clears diacritics */
--track-display: -0.02em;
--track-h2: -0.018em;
--track-caption: 0.08em;
/* Vertical rhythm — every section pad should come from these. */
--space-section: clamp(56px, 6vw, 88px);
--space-section-lg: clamp(72px, 8vw, 112px);
/* Readable measure. */
--measure: 68ch;
--measure-narrow: 54ch;
--ink: #003b7e;
--ink-2: #004b9e;
--ink-3: #075fae;
--paper: #f8fdff;
--paper-2: #e8f7fd;
--muted: #6f91ad;
--line: rgba(8, 123, 230, 0.13);
--line-strong: rgba(8, 123, 230, 0.25);
--brand: #087be6;
--brand-rgb: 8 123 230;
--brand-hover: #20aee8;
--mint: #20c9ec;
--accent-rgb: 32 201 236;
--mint-soft: #8ce3f3;
--amber: #edfaff;
--red: #ff6b57;
--blue: var(--brand);
--radius: 24px;
--shadow: 0 32px 80px rgba(0, 0, 0, 0.35);
--page: min(1240px, calc(100vw - 48px));
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
background: var(--ink);
}
body {
margin: 0;
color: var(--paper);
background:
radial-gradient(circle at 10% 0%, rgb(var(--brand-rgb) / 0.08), transparent 32%),
radial-gradient(circle at 96% 30%, rgba(116, 190, 235, 0.08), transparent 28%),
var(--ink);
font-family: "Be Vietnam Pro", sans-serif;
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
position: fixed;
z-index: 99;
inset: 0;
pointer-events: none;
content: "";
opacity: 0.15;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
mix-blend-mode: soft-light;
}
::selection {
color: var(--ink);
background: var(--mint);
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
img {
display: block;
max-width: 100%;
}
h1,
h2,
h3,
p {
margin-top: 0;
}
h1,
h2,
h3 {
text-wrap: balance;
}
h1 {
margin-bottom: 26px;
font-size: var(--fs-display);
font-weight: 800;
letter-spacing: var(--track-display);
line-height: var(--lh-display);
}
h2 {
margin-bottom: 24px;
font-size: var(--fs-h2);
font-weight: 800;
letter-spacing: var(--track-h2);
line-height: var(--lh-h2);
}
h3 {
margin-bottom: 14px;
font-size: var(--fs-h3);
font-weight: 700;
letter-spacing: -0.01em;
line-height: var(--lh-h3);
}
p {
color: var(--muted);
line-height: var(--lh-body);
}
.page-shell {
width: var(--page);
margin: 0 auto;
}
.mono,
.eyebrow,
.tag,
.metric-label,
.step-index,
.ticker,
.footer-kicker {
font-family: "IBM Plex Mono", monospace;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.eyebrow {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin-bottom: 25px;
color: var(--mint-soft);
font-size: 0.875rem;
font-weight: 600;
}
.eyebrow::before {
width: 32px;
height: 1px;
content: "";
background: var(--mint);
}
.accent {
color: var(--mint);
}
.gradient-text {
color: transparent;
background: linear-gradient(100deg, var(--mint) 0%, #78bee9 43%, var(--amber) 100%);
background-clip: text;
-webkit-background-clip: text;
}
.ht-highlight {
font-size: inherit;
font-weight: 700;
letter-spacing: 0.02em;
background: linear-gradient(120deg, #38bdf8 0%, #818cf8 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline;
}
.section-light .ht-highlight {
background: linear-gradient(120deg, #005696 0%, #0084e3 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
display: inline;
}
.lead {
max-width: 760px;
color: #c4d8e6;
font-size: var(--fs-h4);
}
.section {
position: relative;
padding: 120px 0;
}
.section-tight {
padding: 78px 0;
}
.section-light {
color: var(--ink);
background: var(--paper);
}
.section-light p {
color: #4f687b;
}
.section-light .eyebrow {
color: var(--brand);
}
.section-light .eyebrow::before {
background: var(--brand);
}
.section-grid {
position: relative;
}
.section-grid::before,
.grid-bg {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
opacity: 0.42;
background-image:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: linear-gradient(to bottom, transparent, black 16%, black 84%, transparent);
}
.section-head {
display: flex;
gap: 50px;
align-items: end;
justify-content: space-between;
margin-bottom: 60px;
}
.section-head h2 {
max-width: 850px;
margin-bottom: 0;
font-size: var(--fs-h2);
}
.section-head p {
max-width: 420px;
margin-bottom: 8px;
}
.btn {
position: relative;
display: inline-flex;
min-height: 54px;
gap: 10px;
align-items: center;
justify-content: center;
padding: 13px 26px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 11px;
color: #fff;
background: var(--brand);
box-shadow: 0 14px 34px rgb(var(--brand-rgb) / 0.28);
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
cursor: pointer;
overflow: hidden;
}
.btn:focus-visible {
outline: 2px solid rgb(var(--brand-rgb) / 0.6);
outline-offset: 3px;
}
.btn::after {
position: absolute;
top: -120%;
left: -30%;
width: 25%;
height: 340%;
content: "";
background: rgba(255, 255, 255, 0.32);
transform: rotate(25deg);
transition: left 0.55s ease;
}
.btn:hover {
background: var(--brand-hover);
box-shadow: 0 18px 46px rgb(var(--brand-rgb) / 0.28);
transform: translateY(-3px);
}
.btn:hover::after {
left: 115%;
}
.btn-secondary {
color: var(--paper);
border-color: var(--line-strong);
background: rgba(255, 255, 255, 0.025);
box-shadow: none;
}
.btn-secondary:hover {
color: var(--mint);
border-color: rgb(var(--brand-rgb) / 0.45);
background: rgb(var(--brand-rgb) / 0.07);
}
.btn-small {
min-height: 42px;
padding: 9px 17px;
border-radius: 9px;
font-size: 1rem;
}
.arrow {
display: inline-block;
transition: transform 0.22s ease;
}
a:hover .arrow,
button:hover .arrow {
transform: translateX(4px);
}
/* Header */
.site-header {
position: fixed;
z-index: 50;
top: 0;
right: 0;
left: 0;
border-bottom: 1px solid transparent;
background: rgba(3, 17, 29, 0.74);
backdrop-filter: blur(20px);
transition: background 0.3s ease, border-color 0.3s ease;
}
.site-header.scrolled {
border-color: var(--line);
background: rgba(3, 17, 29, 0.93);
}
.nav-wrap {
display: flex;
width: min(1400px, calc(100vw - 48px));
min-height: 76px;
align-items: center;
justify-content: space-between;
}
.brand {
display: inline-flex;
gap: 11px;
align-items: center;
text-decoration: none;
}
.brand-logo-shell {
display: grid;
width: 44px;
height: 44px;
flex: 0 0 44px;
place-items: center;
border: 1px solid rgba(0, 166, 230, 0.4);
border-radius: 50%;
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 123, 255, 0.15);
overflow: hidden;
}
.brand-logo {
width: 38px;
height: 38px;
object-fit: contain;
}
.brand-text-stack {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.05;
}
.brand-name {
font-size: 1.25rem;
font-weight: 800;
letter-spacing: -0.02em;
display: flex;
align-items: baseline;
line-height: 1;
}
.brand-hanoi {
color: #0A3B82;
font-weight: 800;
}
.brand-trace {
color: #00A6E6;
font-weight: 800;
margin-left: 0;
}
.brand-vn {
color: #00A6E6;
font-size: 0.7em;
font-weight: 700;
margin-left: 1px;
}
.brand-sub {
font-size: 0.75rem;
font-weight: 700;
color: #0A3B82;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1.3;
margin-top: 2px;
opacity: 0.9;
}
.lang-selector {
display: inline-flex;
align-items: center;
gap: 5px;
font-weight: 800;
font-size: 0.875rem;
color: #0A3B82;
margin-left: 4px;
}
.lang-option {
cursor: pointer;
color: #64748B;
transition: color 0.2s ease;
}
.lang-option.active,
.lang-option:hover {
color: var(--accent-blue-text);
}
.lang-divider {
color: #8ba0b5;
font-weight: 400;
}
.nav-links {
display: flex;
gap: 14px;
align-items: center;
flex-wrap: nowrap;
white-space: nowrap;
}
.nav-item {
position: relative;
}
.nav-link,
.nav-trigger {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 8px 10px;
border: 0;
border-radius: 8px;
color: #06457f;
background: transparent;
font-size: var(--fs-sm);
font-weight: 700;
white-space: nowrap;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.nav-link:hover,
.nav-trigger:hover,
.nav-link.active,
.nav-trigger.active {
color: var(--paper);
background: rgba(255, 255, 255, 0.055);
}
.chevron {
width: 7px;
height: 7px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.2s ease;
}
.nav-item.open .chevron {
transform: translateY(2px) rotate(225deg);
}
.mega-menu {
position: absolute;
top: calc(100% + 20px);
left: 50%;
width: min(760px, 90vw);
padding: 22px;
border: 1px solid var(--line-strong);
border-radius: 20px;
background: rgba(5, 27, 44, 0.98);
box-shadow: var(--shadow);
opacity: 0;
visibility: hidden;
transform: translate(-50%, -8px);
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.nav-item.open .mega-menu {
opacity: 1;
visibility: visible;
transform: translate(-50%, 0);
}
.mega-inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 18px;
}
.mega-feature {
position: relative;
min-height: 220px;
padding: 24px;
border: 1px solid rgb(var(--brand-rgb) / 0.16);
border-radius: 15px;
background:
linear-gradient(140deg, rgb(var(--brand-rgb) / 0.14), transparent 55%),
var(--ink);
overflow: hidden;
}
.mega-feature::after {
position: absolute;
right: -40px;
bottom: -70px;
width: 210px;
height: 210px;
content: "";
border: 1px solid rgb(var(--brand-rgb) / 0.26);
border-radius: 50%;
box-shadow: 0 0 0 25px rgb(var(--brand-rgb) / 0.035), 0 0 0 50px rgb(var(--brand-rgb) / 0.018);
}
.mega-feature h3 {
max-width: 330px;
margin-top: 38px;
font-size: 1.75rem;
}
.mega-feature p {
margin-bottom: 0;
font-size: 1rem;
}
.mega-list {
display: grid;
align-content: start;
gap: 4px;
}
.mega-link {
display: grid;
grid-template-columns: 34px 1fr auto;
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 10px;
color: #c7d8e5;
font-size: 1rem;
transition: background 0.2s ease, color 0.2s ease;
}
.mega-link:hover {
color: var(--paper);
background: rgba(255, 255, 255, 0.055);
}
.mega-icon {
display: grid;
width: 34px;
height: 34px;
place-items: center;
border: 1px solid var(--line);
border-radius: 9px;
color: var(--mint);
background: rgb(var(--brand-rgb) / 0.06);
font-family: "IBM Plex Mono", monospace;
font-size: 0.875rem;
}
.nav-actions {
display: flex;
gap: 9px;
align-items: center;
}
.nav-actions .btn {
white-space: nowrap;
}
.portal-home .nav-actions .btn-secondary {
color: #0b3b7e;
border-color: rgba(8, 123, 230, 0.3);
background: rgba(8, 123, 230, 0.05);
}
.portal-home .nav-actions .btn-secondary:hover {
color: #06457f;
border-color: rgba(8, 123, 230, 0.45);
background: rgba(8, 123, 230, 0.1);
}
@media (max-width: 1400px) {
.nav-actions .btn { display: none; }
}
.theme-control {
position: relative;
}
.theme-toggle {
display: inline-flex;
min-height: 40px;
gap: 8px;
align-items: center;
padding: 8px 11px;
border: 1px solid var(--line-strong);
border-radius: 10px;
color: #d3e1eb;
background: rgba(255, 255, 255, 0.035);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover,
.theme-control.open .theme-toggle {
border-color: rgb(var(--brand-rgb) / 0.58);
background: rgb(var(--brand-rgb) / 0.12);
}
.theme-toggle-dot {
width: 15px;
height: 15px;
border: 3px solid rgba(255, 255, 255, 0.86);
border-radius: 50%;
background: var(--brand);
box-shadow: 0 0 0 1px rgb(var(--brand-rgb) / 0.55);
}
.theme-panel {
position: absolute;
top: calc(100% + 14px);
right: 0;
width: min(360px, calc(100vw - 28px));
padding: 18px;
border: 1px solid var(--line-strong);
border-radius: 18px;
color: var(--paper);
background: rgba(5, 24, 39, 0.98);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.theme-control.open .theme-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.theme-panel-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 16px;
}
.theme-panel-head span,
.theme-custom > span,
.theme-hue > span {
display: block;
color: #809bad;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.theme-panel-head strong {
display: block;
margin-top: 4px;
font-size: 1rem;
}
.theme-close {
width: 30px;
height: 30px;
border: 1px solid var(--line);
border-radius: 8px;
color: #bdd0dc;
background: transparent;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
}
.theme-presets {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 7px;
margin-bottom: 17px;
}
.theme-presets button {
display: grid;
gap: 6px;
min-width: 0;
padding: 8px 3px;
border: 1px solid transparent;
border-radius: 10px;
color: #8fa8b8;
background: rgba(255, 255, 255, 0.025);
font-size: 0.75rem;
cursor: pointer;
}
.theme-presets button:hover,
.theme-presets button.active {
color: #fff;
border-color: rgb(var(--brand-rgb) / 0.38);
background: rgb(var(--brand-rgb) / 0.1);
}
.theme-presets i {
width: 25px;
height: 25px;
margin: 0 auto;
border: 3px solid rgba(255, 255, 255, 0.82);
border-radius: 50%;
background: var(--swatch);
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13);
}
.theme-custom {
display: grid;
grid-template-columns: 1fr 42px 92px;
gap: 10px;
align-items: center;
padding: 13px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.theme-custom input[type="color"] {
width: 42px;
height: 34px;
padding: 3px;
border: 1px solid var(--line-strong);
border-radius: 8px;
background: transparent;
cursor: pointer;
}
.theme-custom code {
padding: 6px 8px;
border-radius: 7px;
color: var(--mint-soft);
background: rgba(255, 255, 255, 0.045);
font-size: 0.875rem;
text-align: center;
}
.theme-hue {
display: grid;
gap: 8px;
margin-top: 14px;
}
.theme-hue > span {
display: flex;
justify-content: space-between;
}
.theme-hue output {
color: var(--mint-soft);
}
.theme-hue input {
width: 100%;
height: 8px;
border-radius: 999px;
appearance: none;
background: linear-gradient(90deg, #f44, #ff0, #30d478, #17cbe4, #315fff, #b83de0, #f44);
cursor: pointer;
}
.theme-hue input::-webkit-slider-thumb {
width: 19px;
height: 19px;
border: 3px solid #fff;
border-radius: 50%;
appearance: none;
background: var(--brand);
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}
.theme-reset {
width: 100%;
margin-top: 15px;
padding: 9px 12px;
border: 1px solid var(--line);
border-radius: 9px;
color: #afc2cf;
background: transparent;
font-size: 0.8125rem;
cursor: pointer;
}
.theme-reset:hover {
color: #fff;
border-color: rgb(var(--brand-rgb) / 0.42);
}
.mobile-toggle {
display: none;
width: 42px;
height: 42px;
border: 1px solid var(--line-strong);
border-radius: 9px;
background: transparent;
cursor: pointer;
}
.mobile-toggle span {
display: block;
width: 18px;
height: 1px;
margin: 5px auto;
background: var(--paper);
transition: transform 0.2s ease, opacity 0.2s ease;
}
/* Hero */
.hero {
position: relative;
isolation: isolate;
min-height: max(760px, 100svh);
padding: 155px 0 90px;
overflow: hidden;
background:
radial-gradient(circle at 76% 44%, rgb(var(--brand-rgb) / 0.17), transparent 34%),
linear-gradient(135deg, #03111d 0%, #041725 52%, #03111d 100%);
}
.hero::before {
position: absolute;
inset: 0;
z-index: 0;
content: "";
opacity: 0.28;
background-image:
linear-gradient(rgba(190, 220, 241, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(190, 220, 241, 0.1) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(90deg, black, transparent 58%);
}
.hero-media {
position: absolute;
z-index: 0;
inset: 78px 0 0;
display: flex;
align-items: flex-start;
justify-content: flex-end;
margin: 0;
overflow: hidden;
pointer-events: none;
}
.hero-media img {
display: block;
width: min(100vw, 1915px);
max-width: none;
height: auto;
flex: 0 0 auto;
image-rendering: auto;
animation: hero-media-reveal 1.1s cubic-bezier(.2,.75,.2,1) 0.08s both;
}
.hero-media::before,
.hero-media::after {
position: absolute;
z-index: 1;
content: "";
pointer-events: none;
}
.hero-media::before {
inset: 0;
background:
linear-gradient(180deg, #03111d 0%, rgba(3, 17, 29, 0.5) 7%, transparent 20%),
linear-gradient(90deg, #03111d 0%, rgba(3, 17, 29, 0.97) 24%, rgba(3, 17, 29, 0.46) 46%, transparent 70%);
}
.hero-media::after {
right: 0;
bottom: 0;
left: 0;
height: 28%;
background: linear-gradient(0deg, #03111d, transparent);
}
@keyframes hero-media-reveal {
from {
opacity: 0;
clip-path: inset(0 0 0 14%);
}
to {
opacity: 1;
clip-path: inset(0);
}
}
.hero-canvas {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.72;
}
.hero-content {
position: relative;
z-index: 2;
max-width: 720px;
}
.hero h1 {
max-width: 720px;
font-size: var(--fs-display);
text-wrap: balance;
}
.hero .lead {
max-width: 590px;
margin-bottom: 34px;
}
.hero-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.hero-contact {
min-width: 230px;
justify-content: center;
}
.hero-contact:hover {
color: #fff;
border-color: var(--brand);
background: var(--brand);
box-shadow: 0 18px 46px rgb(var(--brand-rgb) / 0.3);
}
.hero-proof {
display: grid;
grid-template-columns: repeat(3, 1fr);
max-width: 720px;
margin-top: 68px;
border-top: 1px solid var(--line-strong);
}
.proof-item {
padding: 24px 20px 8px 0;
}
.proof-item + .proof-item {
padding-left: 20px;
border-left: 1px solid var(--line);
}
.proof-item strong {
display: block;
margin-bottom: 2px;
color: var(--paper);
font-size: var(--fs-h2);
letter-spacing: -0.02em;
}
.proof-item span {
display: block;
color: var(--muted);
font-size: 0.8125rem;
white-space: nowrap;
}
.float-status {
position: absolute;
z-index: 3;
right: 6vw;
bottom: 11%;
display: flex;
gap: 12px;
align-items: center;
padding: 12px 15px;
border: 1px solid var(--line-strong);
border-radius: 12px;
background: rgba(5, 26, 42, 0.84);
box-shadow: var(--shadow);
backdrop-filter: blur(12px);
font-family: "IBM Plex Mono", monospace;
font-size: 0.875rem;
animation: float 5s ease-in-out infinite;
}
.pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 0.6);
animation: pulse 2s infinite;
}
@keyframes float {
50% { transform: translateY(-10px); }
}
@keyframes pulse {
70% { box-shadow: 0 0 0 10px rgb(var(--brand-rgb) / 0); }
100% { box-shadow: 0 0 0 0 rgb(var(--brand-rgb) / 0); }
}
.trust-strip {
position: relative;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: #051624;
overflow: hidden;
}
.ticker {
display: flex;
width: max-content;
gap: 58px;
align-items: center;
padding: 21px 0;
color: #a2b6c4;
font-size: 0.8125rem;
animation: marquee 30s linear infinite;
}
.ticker span::before {
display: inline-block;
width: 5px;
height: 5px;
margin: 0 20px 2px 0;
border-radius: 50%;
content: "";
background: var(--mint);
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
/* Cards and workflows */
.value-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.value-card {
position: relative;
min-height: 390px;
padding: 34px;
border: 1px solid var(--line);
border-radius: var(--radius);
background:
linear-gradient(145deg, rgb(var(--brand-rgb) / 0.08), transparent 45%),
rgba(255, 255, 255, 0.025);
overflow: hidden;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.value-card:hover {
border-color: rgb(var(--brand-rgb) / 0.35);
transform: translateY(-8px);
}
.value-card:nth-child(2) {
background:
linear-gradient(145deg, rgba(96, 183, 235, 0.1), transparent 44%),
rgba(255, 255, 255, 0.025);
}
.value-card:nth-child(3) {
background:
linear-gradient(145deg, rgb(var(--brand-rgb) / 0.12), transparent 44%),
rgba(255, 255, 255, 0.025);
}
.step-index {
color: var(--mint);
font-size: 0.875rem;
}
.section-light .step-index {
color: var(--ink);
}
.value-card h3 {
margin-top: 115px;
}
.payoff {
position: absolute;
right: 34px;
bottom: 30px;
left: 34px;
padding-top: 16px;
border-top: 1px solid var(--line);
color: #c2d5e3;
font-family: "IBM Plex Mono", monospace;
font-size: 0.875rem;
line-height: 1.55;
}
.workflow-panel {
position: relative;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 36px;
padding: 32px;
border: 1px solid var(--line);
border-radius: 28px;
background: #061a2a;
box-shadow: var(--shadow);
overflow: hidden;
}
.workflow-tabs {
display: grid;
gap: 8px;
align-content: center;
}
.workflow-tab {
display: grid;
grid-template-columns: 42px 1fr auto;
gap: 15px;
align-items: center;
padding: 18px;
border: 1px solid transparent;
border-radius: 13px;
color: #98afbf;
background: transparent;
text-align: left;
cursor: pointer;
transition: background 0.22s ease, color 0.22s ease, border 0.22s ease;
}
.workflow-tab strong {
display: block;
color: inherit;
}
.workflow-tab span {
font-size: 0.875rem;
}
.workflow-tab.active {
color: var(--paper);
border-color: rgb(var(--brand-rgb) / 0.27);
background: rgb(var(--brand-rgb) / 0.08);
}
.workflow-tab .num {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 9px;
color: var(--mint);
background: rgb(var(--brand-rgb) / 0.09);
font-family: "IBM Plex Mono", monospace;
}
.workflow-stage {
position: relative;
min-height: 510px;
padding: 28px;
border: 1px solid rgba(202, 226, 244, 0.13);
border-radius: 20px;
background:
linear-gradient(rgba(210, 235, 250, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(210, 235, 250, 0.04) 1px, transparent 1px),
#071f31;
background-size: 34px 34px;
overflow: hidden;
}
.stage-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.stage-head .tag {
color: var(--mint);
font-size: 0.8125rem;
}
.stage-window {
position: relative;
min-height: 360px;
margin-top: 35px;
}
.stage-card {
position: absolute;
padding: 18px;
border: 1px solid var(--line-strong);
border-radius: 14px;
background: rgba(4, 25, 40, 0.94);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
transition: transform 0.4s ease, opacity 0.4s ease;
}
.stage-card strong {
display: block;
margin-bottom: 7px;
}
.stage-card small {
color: var(--muted);
}
.stage-card.a {
top: 15px;
left: 5%;
width: 54%;
}
.stage-card.b {
top: 120px;
right: 2%;
width: 52%;
}
.stage-card.c {
bottom: 8px;
left: 12%;
width: 58%;
}
.stage-card .status {
display: inline-flex;
gap: 7px;
align-items: center;
margin-top: 14px;
padding: 5px 8px;
border-radius: 999px;
color: var(--mint-soft);
background: rgb(var(--brand-rgb) / 0.08);
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
}
.stage-line {
position: absolute;
top: 90px;
left: 20%;
width: 62%;
height: 150px;
border-right: 1px dashed rgb(var(--brand-rgb) / 0.4);
border-bottom: 1px dashed rgb(var(--brand-rgb) / 0.4);
border-radius: 0 0 35px;
}
.workflow-stage.changing .stage-card {
opacity: 0;
transform: translateY(12px);
}
/* Interactive product roadmap */
.roadmap-scroll-scene {
position: relative;
height: 330vh;
min-height: 2300px;
}
.roadmap-scroll-scene .roadmap-panel {
position: sticky;
top: 96px;
}
.roadmap-panel {
display: block;
padding: 40px;
border-color: rgb(var(--brand-rgb) / 0.22);
background:
radial-gradient(circle at 50% 0%, rgb(var(--brand-rgb) / 0.16), transparent 40%),
linear-gradient(145deg, #061a2a, #04131f);
}
.roadmap-track {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
min-height: 195px;
padding: 18px 10px 0;
}
.roadmap-line {
position: absolute;
top: 57px;
right: 12.5%;
left: 12.5%;
height: 2px;
background: rgba(170, 205, 228, 0.17);
overflow: hidden;
}
.roadmap-progress {
display: block;
width: var(--roadmap-progress);
height: 100%;
background: linear-gradient(90deg, var(--mint), var(--mint-soft));
box-shadow: 0 0 18px rgba(43, 151, 216, 0.7);
transition: width 0.08s linear, height 0.08s linear;
}
.roadmap-stop {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
color: #7891a3;
border: 0;
background: transparent;
text-align: center;
cursor: pointer;
transition: color 0.25s ease, transform 0.25s ease;
}
.roadmap-stop:hover {
color: #dcecf6;
transform: translateY(-4px);
}
.roadmap-marker {
position: relative;
isolation: isolate;
display: grid;
width: 76px;
height: 76px;
margin-bottom: 16px;
place-items: center;
border: 1px solid rgba(178, 211, 232, 0.2);
border-radius: 50%;
color: #7695aa;
background: #061c2c;
box-shadow: 0 0 0 9px rgba(5, 25, 40, 0.88);
transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.roadmap-marker::before {
position: absolute;
z-index: -1;
inset: 8px;
border: 1px solid rgba(140, 202, 242, 0.12);
border-radius: 18px;
content: "";
transform: rotate(45deg) scale(0.72);
transition: border-color 0.3s ease, transform 0.3s ease;
}
.roadmap-marker svg {
width: 38px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.roadmap-stop.active {
color: #fff;
}
.roadmap-stop.active .roadmap-marker {
color: #fff;
border-color: #3ca2df;
background: linear-gradient(145deg, #1583c5, #075a91);
box-shadow: 0 0 0 9px rgba(5, 25, 40, 0.9), 0 0 38px rgb(var(--brand-rgb) / 0.52);
}
.roadmap-stop.active .roadmap-marker::before {
border-color: rgba(255, 255, 255, 0.36);
transform: rotate(45deg) scale(0.82);
}
.roadmap-step,
.roadmap-kicker,
.roadmap-index,
.roadmap-live,
.core-label,
.lane-index {
font-family: "IBM Plex Mono", monospace;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.roadmap-step {
margin-bottom: 6px;
color: #45a5dc;
font-size: 0.75rem;
}
.roadmap-stop strong {
display: block;
min-height: 26px;
color: inherit;
font-size: var(--fs-body-lg);
white-space: nowrap;
}
.roadmap-stop small {
display: block;
min-height: 22px;
margin-top: 5px;
color: #6f8798;
font-size: 0.8125rem;
}
.roadmap-detail {
padding: 30px;
border: 1px solid rgba(190, 220, 241, 0.14);
border-radius: 22px;
background:
linear-gradient(rgba(210, 235, 250, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(210, 235, 250, 0.035) 1px, transparent 1px),
rgba(6, 29, 46, 0.78);
background-size: 34px 34px;
transition: opacity 0.25s ease;
}
.roadmap-live {
display: inline-flex;
gap: 9px;
align-items: center;
color: #7ca2b9;
font-size: 0.75rem;
}
.roadmap-summary {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 40px;
align-items: end;
padding: 38px 0 28px;
min-height: 205px;
}
.roadmap-kicker {
display: block;
margin-bottom: 12px;
color: #43a4dc;
font-size: 0.8125rem;
}
.roadmap-summary h3 {
min-height: 104px;
max-width: 720px;
margin: 0 0 10px;
color: #fff;
font-size: var(--fs-h3);
}
.roadmap-summary p {
min-height: 58px;
max-width: 760px;
margin: 0;
color: #94aaba;
}
.roadmap-index {
color: rgba(122, 196, 239, 0.16);
font-size: var(--fs-display);
font-weight: 800;
line-height: 0.75;
}
.roadmap-evidence {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.roadmap-panel .stage-card {
position: static;
width: auto;
min-height: 162px;
padding: 20px;
border-color: rgba(190, 220, 241, 0.13);
background: rgba(3, 17, 29, 0.7);
box-shadow: none;
}
.roadmap-panel .stage-card strong {
display: block;
min-height: 52px;
color: #eaf5fc;
}
.roadmap-panel .stage-card small {
display: block;
min-height: 46px;
color: #829bad;
}
.roadmap-detail.changing {
opacity: 0.55;
}
.roadmap-detail.changing .stage-card {
opacity: 0;
transform: translateY(8px);
}
/* Photos */
.split-photo {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 700px;
}
.split-photo-media {
position: relative;
min-height: 600px;
overflow: hidden;
}
.split-photo-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.split-photo-media::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(0deg, rgba(3, 17, 29, 0.44), transparent 55%);
}
.split-photo-copy {
display: grid;
padding: 8vw;
place-content: center;
color: var(--ink);
background: var(--paper);
}
.split-photo-copy p {
color: #4b6476;
}
.check-list {
display: grid;
gap: 16px;
margin: 30px 0 38px;
}
.check-item {
display: grid;
grid-template-columns: 28px 1fr;
gap: 13px;
align-items: start;
color: #2c4b61;
}
#journey .check-item {
color: rgba(255, 255, 255, 0.88);
}
.check {
display: grid;
width: 25px;
height: 25px;
place-items: center;
border-radius: 50%;
color: var(--ink);
background: var(--mint);
font-size: 0.875rem;
font-weight: 800;
}
/* Passport mockup */
.passport-layout {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 80px;
align-items: center;
}
.passport-copy h2 {
font-size: var(--fs-h2);
}
.passport-ui {
position: relative;
padding: 20px;
border: 1px solid rgb(var(--brand-rgb) / 0.22);
border-radius: 28px;
background: linear-gradient(140deg, rgb(var(--brand-rgb) / 0.08), rgba(255, 255, 255, 0.02));
box-shadow: var(--shadow);
transform: perspective(1100px) rotateY(-3deg) rotateX(2deg);
transition: transform 0.35s ease;
}
.passport-ui:hover {
transform: perspective(1100px) rotateY(0) rotateX(0) translateY(-4px);
}
.passport-window {
padding: 22px;
border: 1px solid var(--line);
border-radius: 19px;
background: #f3f8fc;
color: var(--ink);
}
.ui-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
}
.ui-brand {
display: flex;
gap: 8px;
align-items: center;
font-size: 1rem;
font-weight: 800;
}
.ui-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: #0b82c7;
box-shadow: 12px 0 #90caf4, 24px 0 #152b3a;
}
.verified-badge {
padding: 5px 9px;
border-radius: 999px;
color: var(--brand);
background: #d9effc;
font-size: 0.8125rem;
font-weight: 700;
}
.product-head {
display: grid;
grid-template-columns: 72px 1fr;
gap: 15px;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #cadbe7;
}
.product-thumb {
display: grid;
width: 72px;
height: 72px;
place-items: center;
border-radius: 16px;
color: #075b8d;
background: #dfedf7;
font-size: 2rem;
}
.product-head h4 {
margin: 0 0 3px;
font-size: 1rem;
}
.product-head p {
margin: 0;
color: #637c8f;
font-size: 0.875rem;
}
.journey {
display: grid;
margin-top: 25px;
}
.journey-row {
position: relative;
display: grid;
grid-template-columns: 18px 1fr auto;
gap: 13px;
padding: 0 0 23px;
}
.journey-row:not(:last-child)::before {
position: absolute;
top: 12px;
bottom: 0;
left: 5px;
width: 1px;
content: "";
background: #a5becf;
}
.journey-node {
z-index: 1;
width: 11px;
height: 11px;
margin-top: 7px;
border: 2px solid #f3f8fc;
border-radius: 50%;
background: #168dd8;
box-shadow: 0 0 0 3px #b8dff4;
}
.journey-row strong {
display: block;
font-size: 0.875rem;
}
.journey-row span {
color: #6a8192;
font-size: 0.8125rem;
}
.journey-row time {
color: #5e7688;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
}
.qr-float {
position: absolute;
right: -28px;
bottom: 48px;
display: grid;
width: 110px;
height: 125px;
padding: 12px;
place-items: center;
border: 1px solid #cfdeea;
border-radius: 17px;
color: var(--ink);
background: white;
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.22);
font-size: 0.75rem;
font-weight: 700;
text-align: center;
animation: float 5.5s ease-in-out infinite 1s;
}
.qr-code {
width: 70px;
height: 70px;
background:
linear-gradient(90deg, #071927 11px, transparent 11px) 0 0 / 22px 22px,
linear-gradient(#071927 11px, transparent 11px) 0 0 / 22px 22px,
repeating-linear-gradient(45deg, #071927 0 4px, transparent 4px 8px);
image-rendering: pixelated;
}
/* Product passport mobile app */
#passport .passport-ui {
position: relative;
display: grid;
min-height: 760px;
padding: 0;
place-items: center;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
transform: none;
overflow: visible;
}
#passport .passport-ui:hover {
transform: none;
}
.phone-glow {
position: absolute;
width: 520px;
height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgb(var(--brand-rgb) / 0.24), transparent 68%);
filter: blur(10px);
}
.mobile-phone {
position: relative;
z-index: 2;
width: 365px;
border: 8px solid #07111a;
border-radius: 42px;
color: #071927;
background: #f7fbfe;
box-shadow: 0 42px 90px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(142, 201, 238, 0.3);
overflow: hidden;
}
.mobile-phone::before {
position: absolute;
z-index: 5;
top: 9px;
left: 50%;
width: 92px;
height: 22px;
border-radius: 999px;
content: "";
background: #07111a;
transform: translateX(-50%);
}
.phone-status,
.phone-appbar,
.phone-brand,
.phone-meta,
.phone-nav {
display: flex;
align-items: center;
}
.phone-status {
height: 37px;
padding: 0 22px;
color: #5a7080;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
justify-content: space-between;
}
.phone-appbar {
height: 52px;
padding: 0 18px;
border-bottom: 1px solid #dbe8f0;
justify-content: space-between;
}
.phone-brand {
gap: 8px;
color: #0d2738;
font-size: 0.875rem;
font-weight: 800;
text-transform: uppercase;
}
.phone-brand img {
width: 27px;
height: 27px;
object-fit: contain;
}
.phone-menu {
color: #6b8292;
letter-spacing: 0.12em;
}
.phone-visual {
position: relative;
height: 188px;
overflow: hidden;
}
.phone-visual::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(0deg, rgba(2, 18, 29, 0.75), transparent 58%);
}
.phone-visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
.phone-visual .verified-badge {
position: absolute;
z-index: 2;
top: 14px;
right: 14px;
color: var(--brand);
background: rgba(236, 249, 255, 0.94);
}
.phone-image-label {
position: absolute;
z-index: 2;
right: 16px;
bottom: 14px;
left: 16px;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
}
.phone-body {
padding: 18px 18px 12px;
}
.phone-eyebrow {
color: var(--brand);
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.phone-body h3 {
margin: 6px 0 8px;
color: #071927;
font-size: var(--fs-h4);
}
.phone-meta {
gap: 7px;
margin-bottom: 17px;
}
.phone-meta span {
padding: 5px 7px;
border-radius: 6px;
color: #526c7e;
background: #e9f2f8;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
}
.phone-route {
display: grid;
}
.phone-route-row {
position: relative;
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: start;
padding: 0 0 15px;
}
.phone-route-row:not(:last-child)::after {
position: absolute;
top: 29px;
bottom: 4px;
left: 15px;
width: 1px;
content: "";
background: #bad2e1;
}
.phone-route-icon {
position: relative;
z-index: 1;
display: grid;
width: 30px;
height: 30px;
place-items: center;
border: 1px solid #b8d7e9;
border-radius: 50%;
color: var(--brand);
background: #edf7fc;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
}
.phone-route-row.active .phone-route-icon {
color: #fff;
border-color: var(--brand);
background: var(--brand);
box-shadow: 0 0 0 4px #d8edf8;
}
.phone-route-row strong,
.phone-route-row small {
display: block;
}
.phone-route-row strong {
margin-top: 2px;
font-size: 0.875rem;
}
.phone-route-row small {
margin-top: 2px;
color: #718899;
font-size: 0.75rem;
}
.phone-route-row time {
margin-top: 4px;
color: #648092;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
}
.phone-nav {
height: 52px;
padding: 0 18px;
border-top: 1px solid #dce9f1;
color: #7a909f;
font-size: 0.75rem;
justify-content: space-between;
}
.phone-nav .active {
color: var(--brand);
font-weight: 800;
}
.phone-fact {
position: absolute;
z-index: 3;
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
width: 270px;
padding: 16px;
border: 1px solid rgba(151, 204, 236, 0.25);
border-radius: 16px;
background: rgba(6, 28, 44, 0.94);
box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(16px);
}
.phone-fact > span {
display: grid;
width: 38px;
height: 38px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--brand);
}
.phone-fact strong,
.phone-fact small {
display: block;
}
.phone-fact strong {
margin-bottom: 4px;
color: #fff;
font-size: 0.875rem;
}
.phone-fact small {
color: #89a4b6;
font-size: 0.8125rem;
line-height: 1.5;
}
.phone-fact-a {
top: 150px;
right: -40px;
}
.phone-fact-b {
bottom: 120px;
left: -48px;
}
/* Industries */
.industry-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 15px;
}
.industry-card {
position: relative;
grid-column: span 4;
min-height: 300px;
padding: 28px;
border: 1px solid var(--line);
border-radius: 21px;
background: rgba(255, 255, 255, 0.025);
overflow: hidden;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.industry-card:nth-child(1),
.industry-card:nth-child(5) {
grid-column: span 8;
}
.industry-card:hover {
border-color: rgb(var(--brand-rgb) / 0.38);
transform: translateY(-6px);
}
.industry-card::after {
position: absolute;
right: -50px;
bottom: -70px;
width: 200px;
height: 200px;
content: "";
border: 1px solid rgb(var(--brand-rgb) / 0.16);
border-radius: 50%;
box-shadow: 0 0 0 24px rgb(var(--brand-rgb) / 0.025), 0 0 0 48px rgb(var(--brand-rgb) / 0.015);
}
.industry-icon {
display: grid;
width: 50px;
height: 50px;
margin-bottom: 70px;
place-items: center;
border: 1px solid rgb(var(--brand-rgb) / 0.2);
border-radius: 13px;
color: var(--mint);
background: rgb(var(--brand-rgb) / 0.07);
font-family: "IBM Plex Mono", monospace;
font-size: 0.875rem;
}
.section-light .industry-icon {
color: var(--ink);
background: rgb(var(--brand-rgb) / 0.1);
border-color: rgb(var(--brand-rgb) / 0.25);
}
.industry-card h3 {
font-size: 1.5rem;
}
.industry-card p {
max-width: 520px;
margin-bottom: 0;
font-size: 1rem;
}
/* Industry switchboard */
.industry-switchboard {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
min-height: 630px;
border: 1px solid var(--line-strong);
border-radius: 28px;
background: #051725;
box-shadow: var(--shadow);
overflow: hidden;
}
.industry-core {
position: relative;
display: grid;
padding: 54px;
border-right: 1px solid var(--line);
background:
linear-gradient(rgba(190, 220, 241, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(190, 220, 241, 0.045) 1px, transparent 1px),
radial-gradient(circle at 50% 40%, rgb(var(--brand-rgb) / 0.16), transparent 42%);
background-size: 42px 42px, 42px 42px, auto;
align-content: center;
}
.core-label {
position: absolute;
top: 30px;
left: 32px;
color: var(--mint);
font-size: 0.75rem;
}
.core-orbit {
position: relative;
display: grid;
width: 170px;
height: 170px;
margin-bottom: 45px;
place-items: center;
border: 1px solid rgba(82, 165, 216, 0.3);
border-radius: 50%;
box-shadow: 0 0 0 28px rgb(var(--brand-rgb) / 0.045), 0 0 0 57px rgb(var(--brand-rgb) / 0.025);
}
.core-orbit::before,
.core-orbit::after,
.core-orbit span {
position: absolute;
width: 10px;
height: 10px;
border: 2px solid #061a2a;
border-radius: 50%;
content: "";
background: var(--mint);
box-shadow: 0 0 18px rgba(73, 168, 223, 0.7);
}
.core-orbit::before { top: 5px; left: 25px; }
.core-orbit::after { right: -3px; bottom: 44px; }
.core-orbit span { bottom: 0; left: 32px; }
.core-orbit strong {
color: #fff;
font-family: "IBM Plex Mono", monospace;
font-size: 3.5rem;
}
.industry-core h3 {
max-width: 360px;
font-size: var(--fs-h3);
}
.industry-core p {
max-width: 430px;
margin-bottom: 0;
}
.industry-lanes {
display: grid;
grid-template-rows: repeat(5, 1fr);
}
.industry-lane {
position: relative;
display: grid;
grid-template-columns: 52px 18px 1fr auto;
gap: 18px;
align-items: center;
padding: 24px 30px;
border-bottom: 1px solid var(--line);
color: #fff;
background: rgba(255, 255, 255, 0.012);
transition: padding-left 0.3s ease, background 0.3s ease;
}
.industry-lane:last-child {
border-bottom: 0;
}
.industry-lane:hover {
padding-left: 40px;
background: rgb(var(--brand-rgb) / 0.12);
}
.lane-index {
color: var(--mint);
font-size: 0.8125rem;
}
.lane-signal {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 6px rgba(35, 141, 204, 0.1);
}
.industry-lane h3 {
margin: 0 0 3px;
font-size: var(--fs-h4);
}
.industry-lane p {
margin: 0;
color: #7892a4;
font-size: 0.875rem;
}
.lane-arrow {
color: #6daed4;
font-size: 1.125rem;
transition: transform 0.25s ease;
}
.industry-lane:hover .lane-arrow {
transform: translate(4px, -4px);
}
/* Chapter 3 — shared data platform */
.architecture-section {
isolation: isolate;
min-height: 900px;
overflow: hidden;
background: #041523;
}
.architecture-backdrop {
position: absolute;
z-index: -2;
inset: 0;
}
.architecture-backdrop img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.58;
}
.architecture-backdrop::after {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(90deg, rgba(3, 17, 29, 0.94) 0%, rgba(3, 17, 29, 0.68) 48%, rgba(3, 17, 29, 0.86) 100%),
linear-gradient(180deg, #03111d 0%, transparent 24%, transparent 74%, #03111d 100%);
}
.architecture-head {
position: relative;
z-index: 2;
}
.architecture-head > p {
color: #b7cddd;
}
.architecture-stack {
position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.architecture-stack::before {
position: absolute;
top: 50%;
right: 4%;
left: 4%;
height: 1px;
content: "";
background: linear-gradient(90deg, transparent, rgba(87, 179, 234, 0.7), transparent);
box-shadow: 0 0 24px rgb(var(--accent-rgb) / 0.45);
}
.architecture-layer {
position: relative;
min-height: 330px;
padding: 24px;
border: 1px solid rgba(140, 202, 242, 0.22);
border-radius: 22px;
background: linear-gradient(160deg, rgba(10, 47, 76, 0.82), rgba(3, 17, 29, 0.78));
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(14px);
overflow: hidden;
}
.architecture-layer::after {
position: absolute;
right: -40px;
bottom: -64px;
width: 210px;
height: 210px;
border: 1px solid rgba(88, 178, 231, 0.18);
border-radius: 50%;
content: "";
box-shadow: 0 0 0 30px rgb(var(--accent-rgb) / 0.025), 0 0 0 60px rgb(var(--accent-rgb) / 0.014);
}
.layer-number {
display: block;
margin-bottom: 20px;
color: rgba(140, 202, 242, 0.45);
font-family: "IBM Plex Mono", monospace;
font-size: 3rem;
font-weight: 600;
letter-spacing: -0.08em;
}
.architecture-layer h3 {
margin: 7px 0 12px;
font-size: var(--fs-h3);
}
.architecture-layer p {
min-height: 80px;
margin-bottom: 18px;
color: #aec4d3;
font-size: 1rem;
}
.layer-tags {
display: flex;
gap: 7px;
flex-wrap: wrap;
}
.layer-tags span,
.integration-protocols span {
padding: 6px 9px;
border: 1px solid rgba(140, 202, 242, 0.18);
border-radius: 999px;
color: var(--mint-soft);
background: rgb(var(--brand-rgb) / 0.08);
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.architecture-spine {
display: flex;
gap: 20px;
align-items: center;
margin-top: 26px;
color: var(--mint-soft);
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.architecture-spine span {
height: 1px;
flex: 1;
background: linear-gradient(90deg, transparent, rgba(140, 202, 242, 0.35));
}
.architecture-spine span:last-child {
transform: rotate(180deg);
}
/* Chapter 5 — operating model */
.governance-section {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(520px, 0.92fr);
min-height: 790px;
color: var(--ink);
background: #eaf3f9;
}
.governance-media {
position: relative;
min-height: 720px;
overflow: hidden;
}
.governance-media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.governance-media::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(90deg, transparent 65%, rgba(234, 243, 249, 0.34));
}
.governance-copy {
display: grid;
padding: clamp(60px, 6.2vw, 110px);
align-content: center;
background:
linear-gradient(rgb(var(--brand-rgb) / 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgb(var(--brand-rgb) / 0.045) 1px, transparent 1px);
background-size: 48px 48px;
}
.governance-copy .eyebrow {
color: var(--brand);
}
.governance-copy .eyebrow::before {
background: var(--brand);
}
.governance-copy h2 {
margin-bottom: 18px;
font-size: var(--fs-h2);
}
.governance-copy h2 span {
color: var(--brand);
}
.governance-copy > p {
max-width: 690px;
margin-bottom: 30px;
color: #4f687b;
}
.governance-levels {
display: grid;
gap: 8px;
}
.governance-levels article {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
align-items: center;
padding: 14px;
border: 1px solid rgb(var(--brand-rgb) / 0.12);
border-radius: 13px;
background: rgba(255, 255, 255, 0.64);
}
.governance-levels article > span {
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--brand);
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
}
.governance-levels strong,
.governance-levels small {
display: block;
}
.governance-levels strong {
font-size: 1rem;
}
.governance-levels small {
margin-top: 2px;
color: #5c7486;
font-size: 0.8125rem;
}
.governance-users {
display: flex;
gap: 7px;
margin-top: 18px;
flex-wrap: wrap;
}
.governance-users span {
padding: 7px 10px;
border-radius: 999px;
color: #24536f;
background: #d5e8f4;
font-size: 0.8125rem;
font-weight: 600;
}
/* Scroll-stacked management model */
.governance-scroll {
position: relative;
padding: 120px 0 180px;
color: var(--ink);
background:
radial-gradient(circle at 82% 12%, rgb(var(--brand-rgb) / 0.09), transparent 28%),
#e5f0f6;
}
.governance-intro {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
gap: 70px;
align-items: end;
margin-bottom: 70px;
}
.governance-intro .eyebrow {
color: var(--brand);
}
.governance-intro .eyebrow::before {
background: var(--brand);
}
.governance-intro h2 {
max-width: 780px;
margin-bottom: 0;
}
.governance-intro h2 span {
color: var(--brand);
}
.governance-intro > p {
margin-bottom: 8px;
color: #4d687b;
}
.governance-stack {
position: relative;
}
.governance-layer {
position: sticky;
z-index: calc(10 + var(--layer-index));
top: calc(92px + var(--layer-index) * 14px);
min-height: min(72vh, 690px);
margin-bottom: 130px;
border: 0;
border-radius: 28px;
background: #071f32;
box-shadow: 0 34px 90px rgba(3, 34, 55, 0.24);
overflow: hidden;
transform-origin: center top;
transition: box-shadow 0.45s ease, filter 0.45s ease, transform 0.45s ease;
}
.governance-layer:last-child {
margin-bottom: 0;
}
.governance-layer:not(.is-layer-active) {
filter: saturate(0.82);
}
.governance-layer.is-layer-active {
box-shadow: 0 42px 110px rgba(3, 34, 55, 0.32);
}
.governance-layer img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s cubic-bezier(.2,.75,.2,1);
}
.governance-layer.is-layer-active img {
transform: scale(1.025);
}
.governance-layer-shade {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(3, 17, 29, 0.94) 0%, rgba(3, 17, 29, 0.72) 38%, rgba(3, 17, 29, 0.1) 76%),
linear-gradient(0deg, rgba(3, 17, 29, 0.76), transparent 48%);
}
.governance-layer-copy {
position: absolute;
z-index: 2;
bottom: 54px;
left: 54px;
width: min(590px, calc(100% - 108px));
color: #fff;
}
.governance-layer-index {
display: block;
margin-bottom: 18px;
color: var(--mint-soft);
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.governance-layer h3 {
margin-bottom: 13px;
font-size: var(--fs-h3);
line-height: 1.3;
}
.governance-units {
max-width: 560px;
margin-bottom: 25px;
color: #c8dce9;
font-size: 1rem;
}
.governance-functions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.governance-functions span {
padding: 8px 11px;
border: 1px solid rgba(140, 202, 242, 0.26);
border-radius: 999px;
color: #d7ebf8;
background: rgba(7, 31, 50, 0.5);
backdrop-filter: blur(9px);
font-size: 0.8125rem;
}
/* Chapter 6 — intelligence */
.intelligence-section {
background:
radial-gradient(circle at 85% 50%, rgb(var(--brand-rgb) / 0.14), transparent 34%),
#03111d;
}
.intelligence-section::before {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
background-image:
linear-gradient(rgba(140, 202, 242, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(140, 202, 242, 0.06) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: linear-gradient(90deg, transparent, black 34%, black 80%, transparent);
}
.intelligence-layout {
position: relative;
display: grid;
grid-template-columns: 0.84fr 1.16fr;
gap: 70px;
align-items: stretch;
}
.intelligence-copy {
display: flex;
min-height: 590px;
flex-direction: column;
justify-content: flex-start;
}
.intelligence-copy h2 {
font-size: var(--fs-h2);
}
.intelligence-principles {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
margin-top: auto;
}
.intelligence-principles article {
display: grid;
grid-template-columns: 28px 1fr;
gap: 9px;
min-height: 84px;
padding: 14px 12px;
border: 1px solid rgba(140, 202, 242, 0.16);
border-radius: 14px;
background: rgba(7, 31, 50, 0.82);
}
.intelligence-principles article > span {
color: var(--mint);
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
}
.intelligence-principles strong,
.intelligence-principles small {
display: block;
}
.intelligence-principles small {
margin-top: 4px;
color: #8fa9ba;
font-size: 0.8125rem;
white-space: nowrap;
}
.intelligence-media {
position: relative;
min-height: 590px;
margin: 0;
border: 1px solid rgba(140, 202, 242, 0.22);
border-radius: 26px;
box-shadow: 0 40px 90px rgba(0, 0, 0, 0.38);
overflow: hidden;
}
.intelligence-media img {
width: 100%;
height: 100%;
min-height: 590px;
object-fit: cover;
}
.intelligence-media::after {
position: absolute;
inset: 0;
pointer-events: none;
content: "";
background: linear-gradient(0deg, rgba(3, 17, 29, 0.74), transparent 35%);
}
.intelligence-media figcaption {
position: absolute;
z-index: 2;
right: 24px;
bottom: 22px;
left: 24px;
display: flex;
gap: 11px;
align-items: center;
color: #d7e7f2;
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Chapter 6 — integration hub */
.integration-section {
color: var(--ink);
background: #f3f8fb;
}
.integration-section .eyebrow {
color: var(--brand);
}
.integration-section .eyebrow::before {
background: var(--brand);
}
.integration-section .section-head p {
color: #4f687b;
}
.integration-section .accent {
color: var(--brand);
}
.integration-hub {
position: relative;
min-height: 780px;
border: 1px solid rgb(var(--brand-rgb) / 0.18);
border-radius: 26px;
background:
radial-gradient(circle at 50% 49%, rgba(255, 255, 255, 0.96) 0 11%, transparent 29%),
linear-gradient(rgb(var(--brand-rgb) / 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgb(var(--brand-rgb) / 0.055) 1px, transparent 1px),
#e9f3f9;
background-size: 42px 42px;
overflow: hidden;
}
.integration-hub::before {
position: absolute;
inset: 9%;
pointer-events: none;
content: "";
opacity: 0.45;
background: repeating-conic-gradient(from 0deg, rgb(var(--brand-rgb) / 0.22) 0 1px, transparent 1px 36deg);
mask-image: radial-gradient(circle, transparent 0 25%, #000 26% 78%, transparent 79%);
}
.data-exchange {
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
}
.data-exchange > span {
--out-speed: 4.7s;
--in-speed: 6.1s;
--out-delay: -1.2s;
--in-delay: -3.4s;
position: absolute;
top: var(--flow-y, 49%);
left: var(--flow-x, 50%);
width: var(--flow-length, 34%);
height: 2px;
background: linear-gradient(90deg, rgb(var(--brand-rgb) / 0.46), rgb(var(--brand-rgb) / 0.13) 56%, rgb(var(--brand-rgb) / 0.025));
transform: rotate(var(--flow-angle));
transform-origin: left center;
}
.data-exchange i,
.data-exchange b {
position: absolute;
top: -4px;
width: 9px;
height: 9px;
border-radius: 3px;
background: var(--mint);
box-shadow:
-10px 0 12px rgb(var(--accent-rgb) / 0.2),
0 0 0 4px rgb(var(--accent-rgb) / 0.09),
0 0 17px rgb(var(--accent-rgb) / 0.72);
}
.data-exchange i {
animation: data-flow-out var(--out-speed) cubic-bezier(.35,.05,.25,1) var(--out-delay) infinite;
}
.data-exchange b {
width: 6px;
height: 6px;
top: -2px;
border-radius: 50%;
background: #65c5f4;
box-shadow:
9px 0 11px rgba(101, 197, 244, 0.24),
0 0 0 5px rgba(101, 197, 244, 0.08),
0 0 18px rgba(38, 151, 213, 0.7);
animation: data-flow-in var(--in-speed) cubic-bezier(.3,.05,.22,1) var(--in-delay) infinite;
}
@keyframes data-flow-out {
0%, 12% { left: 5%; opacity: 0; transform: scaleX(0.7); }
18% { opacity: 1; }
58% { left: 72%; opacity: 1; transform: scaleX(1.35); }
72% { left: 96%; opacity: 0; transform: scaleX(0.7); }
100% { left: 96%; opacity: 0; }
}
@keyframes data-flow-in {
0%, 25% { left: 96%; opacity: 0; transform: scale(0.7); }
31% { opacity: 0.95; }
64% { left: 43%; opacity: 1; transform: scale(1.2); }
82% { left: 6%; opacity: 0; transform: scale(0.7); }
100% { left: 6%; opacity: 0; }
}
.data-exchange > span:nth-child(2n) { --out-speed: 5.8s; --in-speed: 4.4s; --out-delay: -3.7s; --in-delay: -1.1s; }
.data-exchange > span:nth-child(3n) { --out-speed: 3.9s; --in-speed: 7.2s; --out-delay: -0.6s; --in-delay: -5.8s; }
.data-exchange > span:nth-child(4n) { --out-speed: 6.6s; --in-speed: 5.1s; --out-delay: -5.2s; --in-delay: -2.4s; }
.data-exchange > span:nth-child(5n) { --out-speed: 4.3s; --in-speed: 6.8s; --out-delay: -2.8s; --in-delay: -4.6s; }
.orbit-ring {
position: absolute;
top: 49%;
left: 50%;
pointer-events: none;
border: 1px solid rgb(var(--brand-rgb) / 0.16);
border-radius: 50%;
transform: translate(-50%, -50%);
}
.orbit-ring::before,
.orbit-ring::after {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
content: "";
background: var(--mint);
box-shadow: 0 0 0 7px rgb(var(--accent-rgb) / 0.09), 0 0 22px rgb(var(--accent-rgb) / 0.56);
}
.orbit-ring-outer {
width: 78%;
height: 76%;
animation: orbit-ring-spin 32s linear infinite;
}
.orbit-ring-outer::before { top: 15%; left: 8%; }
.orbit-ring-outer::after { right: 5%; bottom: 23%; }
@keyframes orbit-ring-spin {
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.integration-core {
position: absolute;
z-index: 4;
top: 49%;
left: 50%;
display: grid;
align-content: center;
justify-items: center;
width: 292px;
height: 292px;
padding: 28px;
border: 1px solid rgb(var(--brand-rgb) / 0.34);
border-radius: 50%;
background:
linear-gradient(rgb(var(--brand-rgb) / 0.055) 1px, transparent 1px),
linear-gradient(90deg, rgb(var(--brand-rgb) / 0.055) 1px, transparent 1px),
radial-gradient(circle at 50% 35%, rgb(var(--brand-rgb) / 0.12), transparent 48%),
rgba(255, 255, 255, 0.97);
background-size: 22px 22px, 22px 22px, auto, auto;
box-shadow:
0 32px 80px rgba(3, 42, 69, 0.2),
0 0 0 10px rgba(255, 255, 255, 0.72),
0 0 0 22px rgb(var(--brand-rgb) / 0.055);
text-align: center;
transform: translate(-50%, -50%);
}
.integration-core::after {
display: none;
}
.core-kicker {
margin-bottom: 9px;
color: #557588;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.core-emblem {
display: grid;
width: 92px;
height: 92px;
margin-bottom: 10px;
place-items: center;
border: 1px solid rgb(var(--brand-rgb) / 0.18);
border-radius: 24px;
background: #fff;
box-shadow: 0 14px 34px rgb(var(--brand-rgb) / 0.13);
}
.integration-core .core-emblem img {
width: 78px;
height: 78px;
margin: 0;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgb(var(--brand-rgb) / 0.15));
}
.integration-core strong {
color: #073354;
font-size: 1.5rem;
letter-spacing: 0.1em;
}
.integration-core small {
margin-top: 3px;
color: #557588;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
text-transform: uppercase;
}
.core-status {
display: inline-flex;
gap: 7px;
align-items: center;
margin-top: 13px;
padding: 6px 10px;
border-radius: 999px;
color: #315d78;
background: rgb(var(--brand-rgb) / 0.07);
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.core-status i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / 0.1);
}
.integration-partners {
position: absolute;
z-index: 3;
inset: 0;
}
.partner-card {
position: absolute;
display: grid;
width: 152px;
min-height: 108px;
gap: 7px;
padding: 12px;
place-items: center;
border: 1px solid rgb(var(--brand-rgb) / 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 16px 38px rgba(3, 42, 69, 0.07);
text-align: center;
transition: transform 0.24s ease, border-color 0.24s ease, box-shadow 0.24s ease;
}
.partner-card:hover {
border-color: rgb(var(--brand-rgb) / 0.38);
box-shadow: 0 20px 48px rgba(3, 42, 69, 0.12);
transform: translateY(-4px);
}
.partner-card img {
width: 62px;
height: 52px;
object-fit: contain;
}
.partner-wide-logo img {
width: 122px;
height: 44px;
}
.partner-card span {
color: #204a64;
font-size: 0.8125rem;
font-weight: 600;
}
.partner-card.city-system img {
width: 44px;
height: 44px;
}
.node-1 { top: 4%; left: calc(50% - 76px); }
.node-2 { top: 10%; right: 16%; }
.node-3 { top: 32%; right: 4%; }
.node-4 { right: 11%; bottom: 10%; }
.node-5 { bottom: 3%; left: calc(50% - 76px); }
.node-6 { bottom: 10%; left: 11%; }
.node-7 { top: 32%; left: 4%; }
.node-8 { top: 10%; left: 16%; }
.node-9 { top: 45%; right: 23%; }
.node-10 { top: 45%; left: 23%; }
.orbit-more {
color: var(--brand);
border-style: dashed;
background: rgba(225, 241, 251, 0.95);
}
.orbit-more strong {
color: var(--brand);
font-size: 2rem;
line-height: 1;
}
.integration-protocols {
position: absolute;
z-index: 3;
right: 28px;
bottom: 18px;
left: 28px;
display: flex;
gap: 7px;
align-items: center;
}
.integration-protocols span {
color: var(--brand);
border-color: rgb(var(--brand-rgb) / 0.16);
}
.integration-protocols strong {
margin-left: auto;
color: #557588;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
/* Alternating section rhythm */
#scale {
background:
radial-gradient(circle at 16% 50%, rgb(var(--brand-rgb) / 0.15), transparent 28%),
#061a2a;
}
#consumer-trust {
background: #061a2a;
}
#connect {
background: #e5f0f6;
}
/* Metrics */
.metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line-strong);
border-bottom: 1px solid var(--line-strong);
}
.metric {
min-height: 230px;
padding: 45px 28px;
}
.metric + .metric {
border-left: 1px solid var(--line);
}
.metric > strong {
display: block;
margin-bottom: 13px;
color: var(--mint);
font-size: var(--fs-display);
letter-spacing: -0.07em;
line-height: 1;
}
.metric:first-child > strong {
font-size: var(--fs-display);
}
.metric-label {
color: #b2c5d3;
font-size: 0.8125rem;
}
/* Testimonials */
.quote-card {
position: relative;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
min-height: 500px;
border: 1px solid var(--line);
border-radius: 28px;
background: #071d2d;
overflow: hidden;
}
.quote-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.quote-copy {
display: grid;
padding: 60px;
place-content: center;
}
.quote-copy blockquote {
margin: 0 0 30px;
color: var(--paper);
font-size: var(--fs-h2);
font-weight: 600;
letter-spacing: -0.02em;
line-height: 1.3;
}
.quote-copy cite {
color: var(--mint);
font-style: normal;
font-weight: 700;
}
.quote-copy small {
display: block;
color: var(--muted);
}
/* Page heroes */
.sub-hero {
position: relative;
min-height: 720px;
padding: 190px 0 110px;
overflow: hidden;
}
.sub-hero::before {
position: absolute;
inset: 0;
content: "";
background:
linear-gradient(var(--line) 1px, transparent 1px),
linear-gradient(90deg, var(--line) 1px, transparent 1px);
background-size: 60px 60px;
mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.sub-hero::after {
position: absolute;
top: 10%;
right: -15%;
width: 700px;
height: 700px;
content: "";
border: 1px solid rgb(var(--brand-rgb) / 0.14);
border-radius: 50%;
box-shadow:
0 0 0 80px rgb(var(--brand-rgb) / 0.025),
0 0 0 160px rgb(var(--brand-rgb) / 0.012);
}
.sub-hero-inner {
position: relative;
z-index: 2;
max-width: 1020px;
}
.sub-hero h1 {
font-size: var(--fs-display);
}
.sub-hero .lead {
margin-bottom: 35px;
}
.hero-diagram {
position: absolute;
z-index: 3;
right: 6vw;
bottom: 8%;
display: grid;
width: min(470px, 38vw);
gap: 12px;
padding: 16px;
}
.diagram-layer {
display: flex;
gap: 8px;
padding: 15px;
border: 1px solid var(--line-strong);
border-radius: 12px;
background: rgba(5, 26, 42, 0.9);
backdrop-filter: blur(12px);
}
.diagram-layer.featured {
border-color: rgb(var(--brand-rgb) / 0.4);
background: rgba(0, 78, 126, 0.45);
}
.diagram-chip {
padding: 6px 9px;
border: 1px solid var(--line);
border-radius: 7px;
color: #c6d8e5;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
}
.breadcrumbs {
display: flex;
gap: 7px;
margin-bottom: 24px;
color: #708b9e;
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
}
.process-list {
display: grid;
border-top: 1px solid var(--line);
}
.process-row {
display: grid;
grid-template-columns: 90px 1fr 1fr;
gap: 30px;
padding: 40px 0;
border-bottom: 1px solid var(--line);
align-items: start;
}
.process-row .step-index {
padding-top: 8px;
}
.process-row p {
margin: 3px 0 0;
}
.image-band {
position: relative;
min-height: 580px;
background-position: center;
background-size: cover;
}
.image-band::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(90deg, rgba(3, 17, 29, 0.93), rgba(3, 17, 29, 0.2));
}
.image-band-content {
position: relative;
z-index: 2;
display: grid;
min-height: 580px;
max-width: 650px;
place-content: center;
}
.resource-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.resource-card {
display: flex;
min-height: 390px;
flex-direction: column;
padding: 28px;
border: 1px solid var(--line);
border-radius: 20px;
background: rgba(255, 255, 255, 0.025);
transition: transform 0.3s ease, border 0.3s ease;
}
.resource-card:hover {
border-color: rgb(var(--brand-rgb) / 0.36);
transform: translateY(-7px);
}
.resource-card .tag {
color: var(--mint);
font-size: 0.8125rem;
}
.section-light .resource-card .tag {
color: var(--ink-3);
}
.resource-card h3 {
margin-top: 80px;
font-size: 1.5rem;
}
.resource-card p {
font-size: 1rem;
}
.resource-link {
margin-top: auto;
color: var(--mint-soft);
font-size: 1rem;
font-weight: 700;
}
/* About timeline */
.timeline {
position: relative;
display: grid;
max-width: 950px;
margin: 0 auto;
}
.timeline::before {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
content: "";
background: var(--line-strong);
}
.timeline-item {
position: relative;
width: 50%;
padding: 0 60px 80px 0;
}
.timeline-item:nth-child(even) {
margin-left: 50%;
padding: 0 0 80px 60px;
}
.timeline-dot {
position: absolute;
top: 5px;
right: -7px;
width: 14px;
height: 14px;
border: 3px solid var(--ink);
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 1px rgb(var(--brand-rgb) / 0.5);
}
.timeline-item:nth-child(even) .timeline-dot {
right: auto;
left: -7px;
}
.timeline-item .tag {
color: var(--mint);
font-size: 0.8125rem;
}
.timeline-item h3 {
margin-top: 13px;
}
/* Forms */
.contact-layout {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 80px;
align-items: start;
}
.contact-points {
display: grid;
gap: 18px;
margin-top: 40px;
}
.contact-point {
display: grid;
grid-template-columns: 42px 1fr;
gap: 15px;
align-items: center;
}
.contact-point-icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border: 1px solid rgb(var(--brand-rgb) / 0.2);
border-radius: 11px;
color: var(--mint);
background: rgb(var(--brand-rgb) / 0.06);
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
}
.contact-point strong,
.contact-point span {
display: block;
}
.contact-point span {
color: var(--muted);
font-size: 1rem;
}
.contact-form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 36px;
border: 1px solid var(--line-strong);
border-radius: 24px;
background: rgba(255, 255, 255, 0.035);
box-shadow: var(--shadow);
}
.field {
display: grid;
gap: 8px;
}
.field.full {
grid-column: 1 / -1;
}
.field label {
color: #b8ccda;
font-size: 0.875rem;
}
.field input,
.field textarea,
.field select {
width: 100%;
min-height: 52px;
padding: 13px 14px;
border: 1px solid var(--line-strong);
border-radius: 10px;
outline: none;
color: var(--paper);
background: rgba(2, 14, 23, 0.66);
transition: border 0.2s ease, box-shadow 0.2s ease;
}
.field textarea {
min-height: 125px;
resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: rgb(var(--brand-rgb) / 0.6);
box-shadow: 0 0 0 3px rgb(var(--brand-rgb) / 0.08);
}
.form-note {
grid-column: 1 / -1;
margin: 0;
color: #6c8799;
font-size: 0.875rem;
}
.toast {
position: fixed;
z-index: 100;
right: 24px;
bottom: 24px;
max-width: 380px;
padding: 16px 18px;
border: 1px solid rgb(var(--brand-rgb) / 0.33);
border-radius: 12px;
color: var(--paper);
background: #082a42;
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transform: translateY(12px);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
/* CTA & footer */
.cta-panel {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: 48px;
align-items: stretch;
padding: 58px;
border: 1px solid rgb(var(--brand-rgb) / 0.28);
border-radius: 30px;
background:
radial-gradient(circle at 90% 50%, rgb(var(--brand-rgb) / 0.14), transparent 34%),
linear-gradient(140deg, #082b44, #051725 65%);
overflow: hidden;
}
.cta-panel::before {
position: absolute;
inset: 0;
content: "";
background-image:
linear-gradient(rgba(207, 232, 248, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(207, 232, 248, 0.05) 1px, transparent 1px);
background-size: 45px 45px;
mask-image: linear-gradient(90deg, transparent, black);
}
.cta-panel > * {
position: relative;
z-index: 1;
}
.cta-panel h2 {
max-width: 820px;
margin-bottom: 0;
}
.cta-panel p {
max-width: 760px;
margin: 20px 0 0;
color: #9cb2c1;
}
.cta-principles {
display: grid;
max-width: 820px;
gap: 0;
margin: 28px 0 0;
padding: 0;
border-top: 1px solid rgba(140, 202, 242, 0.16);
list-style: none;
}
.cta-principles li {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid rgba(140, 202, 242, 0.12);
}
.cta-principles li > span {
color: var(--mint);
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
letter-spacing: 0.1em;
}
.cta-principles li p {
max-width: none;
margin: 0;
color: #b8cad7;
font-size: 1rem;
line-height: 1.6;
}
.cta-visual {
display: grid;
min-width: 0;
grid-template-rows: 1fr auto auto;
gap: 13px;
margin: 0;
}
.cta-visual img {
width: 100%;
height: 100%;
min-height: 295px;
border-radius: 18px;
object-fit: cover;
box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3);
}
.cta-visual-caption {
display: flex;
gap: 8px;
align-items: center;
color: #8fa9ba;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.08em;
line-height: 1.5;
text-transform: uppercase;
}
.cta-visual-caption span {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--mint);
box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / 0.1);
}
.cta-visual .btn {
width: 100%;
}
.site-footer {
padding: 70px 0 28px;
border-top: 1px solid var(--line);
background: #020a11;
font-family: "Be Vietnam Pro", sans-serif;
}
.footer-main {
display: grid;
grid-template-columns: 1.4fr repeat(4, 1fr);
gap: 48px;
padding-bottom: 48px;
align-items: start;
}
.footer-brand p {
max-width: 360px;
margin-top: 20px;
font-size: 0.9375rem;
line-height: 1.6;
}
.footer-social {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
margin-top: 20px !important;
align-items: center !important;
}
.footer-social-link {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
min-height: 36px !important;
max-width: 36px !important;
max-height: 36px !important;
border-radius: 50% !important;
background: #f1f5f9 !important;
border: 1px solid #cbd5e1 !important;
color: #087be6 !important;
transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;
text-decoration: none !important;
}
.footer-social-link svg {
width: 18px !important;
height: 18px !important;
max-width: 18px !important;
max-height: 18px !important;
fill: currentColor !important;
flex-shrink: 0 !important;
}
.footer-social-link:hover {
background: #087be6 !important;
color: #ffffff !important;
border-color: #087be6 !important;
transform: translateY(-3px) !important;
box-shadow: 0 4px 12px rgba(8, 123, 230, 0.3) !important;
}
.footer-kicker {
height: 28px;
display: flex;
align-items: center;
margin-bottom: 18px;
color: #0b66ae;
font-family: "Be Vietnam Pro", sans-serif !important;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer-links a,
.footer-links span {
display: block;
min-height: auto;
font-family: "Be Vietnam Pro", sans-serif !important;
font-size: 0.9375rem;
line-height: 1.5;
color: #9fb3c1;
}
.footer-links a {
transition: color 0.2s ease;
text-decoration: none;
}
.footer-links a:hover {
color: var(--mint, #20c9ec);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 22px;
border-top: 1px solid var(--line);
color: #607587;
font-family: "Be Vietnam Pro", sans-serif !important;
font-size: 0.8125rem;
line-height: 1.5;
}
.footer-bottom a {
color: #7890a4;
text-decoration: none;
transition: color 0.2s ease;
}
.footer-bottom a:hover {
color: #20c9ec;
}
/* Reveal */
.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.75s cubic-bezier(.2,.75,.2,1), transform 0.75s cubic-bezier(.2,.75,.2,1);
}
.reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.spotlight {
--mouse-x: 50%;
--mouse-y: 50%;
}
.spotlight::before {
position: absolute;
z-index: 0;
inset: 0;
pointer-events: none;
content: "";
opacity: 0;
background: radial-gradient(420px circle at var(--mouse-x) var(--mouse-y), rgb(var(--brand-rgb) / 0.1), transparent 42%);
transition: opacity 0.25s ease;
}
.spotlight:hover::before {
opacity: 1;
}
.spotlight > * {
position: relative;
z-index: 1;
}
/* Responsive */
@media (max-width: 1050px) {
:root { --page: min(100% - 34px, 940px); }
.hero-content { max-width: 640px; }
.hero h1 {
max-width: 640px;
}
.hero .lead { max-width: 530px; }
.hero-proof { max-width: 610px; }
.hero-media::before {
background:
linear-gradient(180deg, #03111d 0%, rgba(3, 17, 29, 0.58) 8%, transparent 22%),
linear-gradient(90deg, #03111d 0%, rgba(3, 17, 29, 0.98) 34%, rgba(3, 17, 29, 0.58) 58%, transparent 86%);
}
.nav-links,
.nav-actions .btn-secondary { display: none; }
.mobile-toggle { display: block; }
.nav-links.mobile-open {
position: absolute;
top: 76px;
right: 0;
left: 0;
display: grid;
gap: 4px;
padding: 18px;
border-bottom: 1px solid var(--line-strong);
background: #061b2b;
}
.nav-links.mobile-open .nav-link,
.nav-links.mobile-open .nav-trigger {
width: 100%;
justify-content: space-between;
padding: 14px;
}
.nav-links.mobile-open .mega-menu {
position: static;
display: none;
width: 100%;
margin: 4px 0 8px;
opacity: 1;
visibility: visible;
transform: none;
}
.nav-links.mobile-open .nav-item.open .mega-menu { display: block; }
.mega-inner { grid-template-columns: 1fr; }
.mega-feature { display: none; }
.value-grid { grid-template-columns: 1fr; }
.value-card { min-height: 320px; }
.value-card h3 { margin-top: 70px; }
.architecture-stack { grid-template-columns: 1fr; }
.architecture-layer {
display: grid;
grid-template-columns: 90px 1fr;
min-height: 250px;
}
.architecture-layer .layer-number { margin: 0; }
.architecture-layer p { min-height: auto; }
.governance-section { grid-template-columns: 1fr; }
.governance-media { min-height: 600px; }
.governance-copy { padding: 80px max(28px, calc((100vw - 940px) / 2)); }
.governance-intro {
grid-template-columns: 1fr;
gap: 24px;
}
.governance-intro > p { max-width: 720px; }
.governance-layer { min-height: 620px; }
.intelligence-layout { grid-template-columns: 1fr; }
.intelligence-copy { max-width: 780px; min-height: 0; }
.intelligence-principles { margin-top: 34px; }
.integration-hub { min-height: 720px; }
.integration-core {
min-height: 0;
}
.integration-protocols {
position: absolute;
margin: 0;
flex-wrap: wrap;
}
.integration-protocols strong { margin-left: auto; }
.workflow-panel,
.passport-layout,
.contact-layout { grid-template-columns: 1fr; }
.passport-layout { gap: 60px; }
#passport .passport-ui { margin-top: 10px; }
.industry-switchboard { grid-template-columns: 1fr; }
.industry-core {
min-height: 540px;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.workflow-tabs { grid-template-columns: repeat(2, 1fr); }
.split-photo { grid-template-columns: 1fr; }
.split-photo-media { min-height: 520px; }
.industry-card,
.industry-card:nth-child(1),
.industry-card:nth-child(5) { grid-column: span 6; }
.metrics { grid-template-columns: repeat(2, 1fr); }
.metric:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
.metric:nth-child(4) { border-top: 1px solid var(--line); }
.quote-card { grid-template-columns: 1fr; }
.quote-media { max-height: 500px; }
.resource-grid { grid-template-columns: 1fr 1fr; }
.hero-diagram { display: none; }
.cta-panel { grid-template-columns: 1fr; padding: 50px; }
.footer-main { grid-template-columns: 1.3fr repeat(3, 1fr); }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
:root { --page: calc(100vw - 28px); }
body { font-size: 15px; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-display); }
.section { padding: 84px 0; }
.section-head { display: block; margin-bottom: 40px; }
.section-head h2 { font-size: var(--fs-display); }
.section-head p { margin-top: 22px; }
.nav-actions .btn { display: none; }
.hero {
min-height: auto;
padding: 130px 0 0;
}
.hero-media {
position: relative;
z-index: 2;
inset: auto;
height: 340px;
margin-top: 38px;
border-top: 1px solid rgba(190, 220, 241, 0.12);
background: #03111d;
}
.hero-media img {
position: absolute;
top: 0;
right: -210px;
width: auto;
max-width: none;
height: 100%;
}
.hero-media::before {
background:
linear-gradient(180deg, #03111d 0%, transparent 24%, transparent 72%, rgba(3, 17, 29, 0.55) 100%),
linear-gradient(90deg, rgba(3, 17, 29, 0.48), transparent 38%);
}
.hero-media::after { height: 18%; }
.hero h1 {
max-width: none;
}
.hero-proof { display: none; }
.float-status { display: none; }
.architecture-section { min-height: auto; }
.architecture-head { margin-bottom: 34px; }
.architecture-stack { gap: 10px; }
.architecture-layer {
display: block;
min-height: 330px;
padding: 24px;
}
.architecture-layer .layer-number { margin-bottom: 20px; }
.architecture-layer p { font-size: 1rem; }
.architecture-spine { gap: 10px; font-size: 0.75rem; text-align: center; }
.workflow-panel { padding: 15px; }
.roadmap-panel { padding: 18px; }
.roadmap-scroll-scene {
height: auto;
min-height: 0;
}
.roadmap-scroll-scene .roadmap-panel {
position: relative;
top: auto;
}
.roadmap-track {
grid-template-columns: 1fr;
gap: 10px;
min-height: auto;
padding: 6px 0 24px;
}
.roadmap-line {
top: 45px;
bottom: 69px;
left: 38px;
width: 2px;
height: auto;
}
.roadmap-progress {
width: 100%;
height: var(--roadmap-progress);
}
.roadmap-stop {
display: grid;
grid-template-columns: 76px 42px 1fr;
grid-template-rows: 1fr 1fr;
min-height: 82px;
text-align: left;
}
.roadmap-stop:hover { transform: none; }
.roadmap-marker {
grid-row: 1 / 3;
width: 64px;
height: 64px;
margin: 0;
}
.roadmap-marker svg { width: 31px; }
.roadmap-step {
grid-row: 1 / 3;
align-self: center;
margin: 0;
}
.roadmap-stop strong {
align-self: end;
font-size: 1rem;
}
.roadmap-stop small {
align-self: start;
margin-top: 2px;
}
.roadmap-detail { padding: 22px; }
.roadmap-live { display: none; }
.roadmap-summary {
grid-template-columns: 1fr;
gap: 18px;
padding: 28px 0 22px;
}
.roadmap-summary h3 { font-size: 1.75rem; }
.roadmap-summary h3,
.roadmap-summary p { min-height: 0; }
.roadmap-index { display: none; }
.roadmap-evidence { grid-template-columns: 1fr; }
.roadmap-panel .stage-card,
.roadmap-panel .stage-card strong,
.roadmap-panel .stage-card small { min-height: 0; }
.governance-media { min-height: 450px; }
.governance-copy { padding: 70px 22px; }
.governance-copy h2 { font-size: var(--fs-display); }
.governance-levels article { grid-template-columns: 38px 1fr; padding: 12px; }
.governance-levels article > span { width: 36px; height: 36px; }
.governance-scroll { padding: 84px 0 110px; }
.governance-intro { margin-bottom: 45px; }
.governance-layer {
top: calc(78px + var(--layer-index) * 8px);
min-height: 680px;
margin-bottom: 58px;
border-radius: 20px;
}
.governance-layer-shade {
background:
linear-gradient(90deg, rgba(3, 17, 29, 0.9), rgba(3, 17, 29, 0.24)),
linear-gradient(0deg, rgba(3, 17, 29, 0.94) 0%, rgba(3, 17, 29, 0.78) 44%, transparent 76%);
}
.governance-layer-copy {
right: 22px;
bottom: 25px;
left: 22px;
width: auto;
}
.governance-layer h3 { font-size: var(--fs-display); }
.governance-units { font-size: 0.875rem; }
.governance-functions span { font-size: 0.75rem; }
.intelligence-layout { gap: 44px; }
.intelligence-copy h2 { font-size: var(--fs-display); }
.intelligence-principles {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 6px;
}
.intelligence-principles article {
grid-template-columns: 1fr;
gap: 4px;
min-height: 92px;
padding: 11px 9px;
}
.intelligence-principles small { white-space: normal; }
.intelligence-media,
.intelligence-media img { min-height: 420px; }
.intelligence-media { border-radius: 19px; }
.integration-hub {
min-height: auto;
padding: 44px 18px 22px;
}
.integration-hub::before,
.orbit-ring,
.data-exchange { display: none; }
.integration-core {
position: relative;
top: auto;
left: auto;
width: 260px;
height: 260px;
min-height: 0;
margin: 0 auto 34px;
padding: 24px 20px;
transform: none;
}
.core-emblem { width: 76px; height: 76px; }
.integration-core .core-emblem img { width: 64px; height: 64px; }
.integration-core strong { font-size: 1.125rem; }
.core-status { margin-top: 9px; }
.integration-partners {
position: relative;
inset: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 9px;
}
.partner-card,
.orbit-node {
position: relative;
inset: auto;
width: auto;
min-height: 124px;
padding: 14px 10px;
}
.partner-wide-logo img { width: 125px; }
.integration-protocols {
position: relative;
right: auto;
bottom: auto;
left: auto;
margin: 18px 0 0;
}
.integration-protocols strong { width: 100%; margin: 4px 0 0; }
.workflow-tabs { grid-template-columns: 1fr; }
.workflow-stage { min-height: 470px; padding: 18px; }
.stage-card.a,
.stage-card.b,
.stage-card.c { width: 78%; }
.split-photo-media { min-height: 420px; }
.split-photo-copy { padding: 70px 25px; }
.passport-layout { gap: 45px; }
.passport-ui { transform: none; }
#passport .passport-ui {
min-height: 650px;
margin-top: 0;
}
.mobile-phone {
width: min(100%, 365px);
border-width: 6px;
}
.phone-fact { display: none; }
.phone-glow {
width: 360px;
height: 360px;
}
.qr-float { right: 4px; bottom: 30px; }
.industry-core {
min-height: 500px;
padding: 36px 26px;
}
.core-label {
top: 24px;
left: 26px;
}
.core-orbit {
width: 145px;
height: 145px;
margin-bottom: 40px;
}
.industry-lane {
grid-template-columns: 34px 12px 1fr auto;
gap: 10px;
padding: 22px 18px;
}
.industry-lane:hover { padding-left: 22px; }
.industry-lane h3 { font-size: 1rem; }
.industry-lane p { font-size: 0.8125rem; }
.industry-card,
.industry-card:nth-child(1),
.industry-card:nth-child(5) { grid-column: span 12; }
.metrics { grid-template-columns: 1fr; }
.metric,
.metric + .metric { border-top: 1px solid var(--line); border-left: 0; }
.quote-copy { padding: 35px 25px; }
.sub-hero { min-height: 680px; padding: 150px 0 90px; }
.sub-hero h1 { font-size: var(--fs-display); }
.process-row { grid-template-columns: 50px 1fr; }
.process-row p { grid-column: 2; }
.resource-grid { grid-template-columns: 1fr; }
.timeline::before { left: 7px; }
.timeline-item,
.timeline-item:nth-child(even) {
width: 100%;
margin-left: 0;
padding: 0 0 60px 45px;
}
.timeline-dot,
.timeline-item:nth-child(even) .timeline-dot {
right: auto;
left: 0;
}
.contact-form { grid-template-columns: 1fr; padding: 24px; }
.field.full { grid-column: auto; }
.form-note { grid-column: auto; }
.cta-panel { padding: 36px 24px; }
.cta-visual img { min-height: 250px; }
.theme-toggle-label { display: none; }
.theme-toggle { width: 42px; padding: 8px; justify-content: center; }
.footer-main { grid-template-columns: 1fr 1fr; gap: 40px 22px; }
.footer-brand { grid-column: 1 / -1; }
.footer-bottom { display: grid; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal { opacity: 1; transform: none; }
}
/* ========================================================================== */
/* HANOITRACE CITY DATA PORTAL — 2026 REFRESH */
/* ========================================================================== */
:root {
--portal-blue: var(--brand);
--portal-cyan: #20c9ec;
--portal-cyan-text: #0c85a8;
--portal-teal: #12beaa;
--portal-violet: #6d5bd7;
--portal-amber: #f3a323;
--portal-navy: #0054b6;
--portal-ink: #003b7e;
--portal-text: #315e89;
--portal-sky: #effbff;
--portal-line: #d9edf7;
--portal-card: rgba(255, 255, 255, 0.97);
--portal-shadow: 0 22px 60px rgba(8, 103, 181, 0.11);
}
.portal-home {
color: var(--portal-ink);
background: #f8fdff;
}
.portal-home::before {
opacity: 0.035;
mix-blend-mode: multiply;
}
.portal-home h1,
.portal-home h2,
.portal-home h3 {
letter-spacing: -0.02em;
}
.portal-home p {
color: var(--portal-text);
}
.portal-home .site-header {
position: fixed;
color: var(--portal-ink);
border-color: rgba(5, 91, 166, 0.09);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 8px 30px rgba(28, 95, 154, 0.06);
backdrop-filter: blur(22px) saturate(1.4);
}
.portal-home .site-header.scrolled {
border-color: rgba(5, 91, 166, 0.14);
background: rgba(255, 255, 255, 0.96);
}
.portal-home .brand {
color: #004a9f;
}
.portal-home .brand-logo-shell {
background: #fff;
box-shadow: 0 6px 18px rgba(2, 91, 171, 0.12);
}
.portal-home .nav-link,
.portal-home .nav-trigger {
color: #06457f;
}
.portal-home .nav-link:hover,
.portal-home .nav-trigger:hover,
.portal-home .nav-link.active,
.portal-home .nav-trigger.active {
color: var(--accent-blue-text);
}
.portal-home .theme-toggle,
.portal-home .mobile-toggle {
color: var(--portal-ink);
border-color: #d6e7f4;
background: rgba(255, 255, 255, 0.9);
}
.portal-home .mobile-toggle span {
background: var(--portal-ink);
}
.portal-home .chevron {
border-color: #4e7397;
}
.portal-home .mega-menu,
.portal-home .theme-panel {
color: var(--portal-ink);
}
.portal-hero {
position: relative;
min-height: 580px;
padding-top: 96px;
overflow: hidden;
background: #eaf9ff;
}
.portal-hero-media {
display: contents;
}
.portal-hero-image,
.portal-hero-wash {
position: absolute;
inset: 86px 0 0;
width: 100%;
height: calc(100% - 86px);
}
.portal-hero-image {
object-fit: cover;
object-position: center;
}
.portal-hero-wash {
background:
linear-gradient(90deg, rgba(247, 253, 255, 0.96) 0%, rgba(247, 253, 255, 0.88) 35%, rgba(247, 253, 255, 0.4) 65%, rgba(247, 253, 255, 0.1) 85%),
linear-gradient(0deg, rgba(226, 247, 255, 0.8) 0%, transparent 40%);
}
.hero-constellation-canvas {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 55%;
height: 100%;
z-index: 1;
pointer-events: none;
mask-image: linear-gradient(to right, transparent 0%, #000 22%);
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%);
}
.portal-hero-layout {
position: relative;
z-index: 2;
display: block;
min-height: auto;
padding-top: 20px;
}
.portal-hero-copy {
max-width: 820px;
padding: 20px 0 30px;
}
.hero-title-main {
max-width: 900px;
margin-bottom: 24px;
color: #0A3B82;
font-size: var(--fs-display);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
text-transform: uppercase;
}
.hero-title-highlight {
color: #00A6E6;
}
.portal-hero-points {
display: flex;
gap: 13px;
align-items: center;
margin-bottom: 28px;
font-size: 1rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.val-blue {
color: #0066CC;
font-weight: 800;
}
.val-orange {
color: #FF6B00;
font-weight: 800;
}
.dot-blue {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #00A6E6;
vertical-align: middle;
}
.dot-orange {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 50%;
background: #FF6B00;
vertical-align: middle;
}
.portal-hero-actions {
display: flex;
gap: 16px;
align-items: center;
}
.hero-btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
border-radius: 999px;
background: #007BFF;
color: #ffffff !important;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
border: none;
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.32);
transition: all 0.2s ease;
}
.hero-btn-primary:hover {
background: #0066cc;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 123, 255, 0.42);
}
.hero-btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 26px;
border-radius: 999px;
background: #ffffff;
color: #007BFF !important;
border: 2px solid #007BFF;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 4px 16px rgba(0, 123, 255, 0.08);
transition: all 0.2s ease;
}
.hero-btn-secondary:hover {
background: #f0f7ff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 123, 255, 0.16);
}
/* Hero Embedded Search Strip */
.hero-search-strip {
position: relative;
z-index: 10;
padding-bottom: 24px;
margin-top: 24px;
}
.hero-search-panel {
max-width: 780px;
border-radius: 999px;
background: #ffffff;
border: 2px solid rgba(0, 166, 230, 0.35);
padding: 6px 6px 6px 20px;
box-shadow: 0 12px 35px rgba(0, 74, 159, 0.14);
transition: all 0.25s ease;
}
.hero-search-panel:focus-within {
border-color: #007BFF;
box-shadow: 0 14px 40px rgba(0, 123, 255, 0.25);
}
.hero-search-input-wrap {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.search-icon-left {
flex: 0 0 22px;
width: 22px;
height: 22px;
stroke: #64748B;
}
.hero-search-input-wrap input[type="search"] {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
font-size: 1rem;
color: #0f172a;
padding: 8px 0;
box-shadow: none;
}
.hero-search-input-wrap input[type="search"]::placeholder {
color: #94A3B8;
font-size: 1rem;
}
.hero-search-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 24px;
border-radius: 999px;
background: #007BFF;
color: #ffffff !important;
font-weight: 700;
font-size: 1rem;
border: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 123, 255, 0.3);
transition: all 0.2s ease;
}
.hero-search-btn:hover {
background: #0066cc;
transform: translateY(-1px);
box-shadow: 0 6px 18px rgba(0, 123, 255, 0.4);
}
.hero-lookup-types {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-top: 14px;
padding-left: 6px;
}
.type-pill {
display: inline-flex;
align-items: center;
gap: 7px;
color: #0A3B82;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(0, 166, 230, 0.22);
box-shadow: 0 2px 8px rgba(0, 74, 159, 0.05);
transition: all 0.2s ease;
}
.type-pill:hover {
color: #007BFF;
background: #ffffff;
border-color: #007BFF;
box-shadow: 0 4px 14px rgba(0, 123, 255, 0.18);
transform: translateY(-1px);
}
.type-svg {
color: #00A6E6;
flex: 0 0 16px;
transition: color 0.2s ease;
}
.type-pill:hover .type-svg {
color: #007BFF;
}
.type-icon {
color: #00A6E6;
font-weight: 800;
}
.portal-home .portal-primary {
min-width: 150px;
background: linear-gradient(110deg, var(--brand), var(--portal-cyan));
}
.portal-home .portal-outline {
color: #0057ad;
border-color: #5cbde3;
border-width: 2px;
background: #fff;
box-shadow: 0 10px 30px rgba(18, 105, 170, 0.12);
font-weight: 800;
}
.portal-home .portal-outline:hover {
color: #fff;
background: var(--brand);
}
.hero-live-card {
align-self: end;
margin-bottom: 148px;
padding: 24px;
border: 1px solid rgba(255, 255, 255, 0.86);
border-radius: 22px;
color: #fff;
background: linear-gradient(145deg, rgba(5, 100, 183, 0.84), rgba(22, 193, 228, 0.7));
box-shadow: 0 24px 70px rgba(0, 92, 170, 0.22);
backdrop-filter: blur(14px);
}
.live-card-head {
display: flex;
gap: 10px;
align-items: center;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.hero-live-card strong {
display: block;
margin: 20px 0 2px;
font-size: 3rem;
line-height: 1;
}
.hero-live-card p {
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.83);
font-size: 0.875rem;
line-height: 1.5;
}
.mini-wave {
display: flex;
height: 34px;
gap: 6px;
align-items: end;
}
.mini-wave i {
flex: 1;
height: var(--h, 40%);
border-radius: 3px 3px 0 0;
background: rgba(255, 255, 255, 0.75);
animation: portalWave 1.8s ease-in-out infinite alternate;
}
.mini-wave i:nth-child(2) { --h: 72%; animation-delay: -0.3s; }
.mini-wave i:nth-child(3) { --h: 48%; animation-delay: -0.7s; }
.mini-wave i:nth-child(4) { --h: 90%; animation-delay: -1.1s; }
.mini-wave i:nth-child(5) { --h: 62%; animation-delay: -0.5s; }
.mini-wave i:nth-child(6) { --h: 100%; animation-delay: -1.4s; }
.mini-wave i:nth-child(7) { --h: 74%; animation-delay: -0.9s; }
.mini-wave i:nth-child(8) { --h: 94%; animation-delay: -0.2s; }
.lookup-shell {
position: relative;
z-index: 5;
margin-top: 10px;
}
.lookup-panel {
display: grid;
grid-template-columns: 52px minmax(0, 1fr) auto;
gap: 16px;
align-items: center;
padding: 16px 18px 16px 20px;
border: 1px solid rgba(14, 119, 198, 0.15);
border-radius: 20px;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 24px 70px rgba(12, 96, 158, 0.17);
backdrop-filter: blur(18px);
}
.lookup-icon {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 14px;
color: var(--brand);
background: #edf8ff;
}
.lookup-icon svg {
width: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
}
.lookup-panel label span {
display: block;
margin-bottom: 2px;
color: #0b4f8f;
font-size: 0.8125rem;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.lookup-panel input {
width: 100%;
padding: 0;
border: 0;
outline: 0;
color: #123c68;
background: transparent;
font-size: 1rem;
}
.lookup-panel input::placeholder {
color: #8ba3b8;
}
.lookup-panel .btn {
min-width: 130px;
}
.lookup-types {
display: flex;
gap: 22px;
justify-content: center;
padding: 13px 15px 0;
color: #466987;
font-size: 0.875rem;
font-weight: 700;
}
.lookup-types span {
display: flex;
gap: 7px;
align-items: center;
}
.lookup-types b {
color: var(--brand);
font-size: 1rem;
}
.lookup-kpi-strip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 0;
margin-top: 18px;
padding: 0;
border: 0;
border-top: 1px solid rgba(31, 120, 183, 0.14);
border-radius: 0;
background: none;
box-shadow: none;
backdrop-filter: none;
}
.lookup-kpi {
position: relative;
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
gap: 10px;
min-width: 0;
align-items: start;
padding: 16px 12px;
overflow: hidden;
border: 0;
border-right: 1px solid rgba(31, 120, 183, 0.14);
background: none;
transition: background 0.25s ease;
}
.lookup-kpi:last-child {
border-right: 0;
}
.lookup-kpi:hover {
z-index: 2;
background: rgba(21, 148, 224, 0.05);
}
.lookup-kpi-icon {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 50%;
color: #16afe5;
background: none;
}
.lookup-kpi-icon svg {
width: 32px;
height: 32px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.lookup-kpi-icon.factory { color: #079ad9; }
.lookup-kpi-icon.location { color: #218de4; }
.lookup-kpi-icon.scan { color: #24addf; }
.lookup-kpi-icon.chain { color: #12b6d8; }
.lookup-kpi-icon.shield { color: #20bda9; }
.lookup-kpi-main {
display: flex;
min-width: 0;
flex-direction: column;
gap: 2px;
}
.lookup-kpi-main small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #4d6a86;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.35;
text-transform: uppercase;
}
.lookup-kpi-main strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #0a3d63;
font-size: var(--fs-h3);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
}
.kpi-spark {
display: block;
width: 100%;
max-width: 76px;
height: 18px;
margin-top: 4px;
overflow: visible;
}
.kpi-spark polyline {
fill: none;
stroke: #55c6e8;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
vector-effect: non-scaling-stroke;
}
.lookup-kpi:nth-child(even) .kpi-spark polyline {
stroke: #6bb7e8;
}
.lookup-kpi:nth-child(5) .kpi-spark polyline,
.lookup-kpi:nth-child(6) .kpi-spark polyline {
stroke: #47cfc4;
}
.lookup-kpi-trend {
position: static;
display: flex;
align-items: center;
gap: 4px;
margin-top: 4px;
pointer-events: none;
}
.lookup-kpi-trend b {
color: #119c76;
font-size: 0.8125rem;
font-weight: 800;
white-space: nowrap;
}
.lookup-kpi-trend span {
color: #7890a6;
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.portal-section {
position: relative;
padding: 64px 0;
}
.portal-overview {
padding-top: 54px;
padding-bottom: 36px;
background:
radial-gradient(circle at 85% 10%, rgba(28, 199, 239, 0.09), transparent 28%),
linear-gradient(#f8fcff, #eef8ff);
}
.portal-section-head {
display: flex;
gap: 60px;
align-items: end;
justify-content: space-between;
margin-bottom: 38px;
}
.portal-kicker,
.card-kicker {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
color: #0b66ae;
font-family: "IBM Plex Mono", monospace;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.portal-kicker::before {
width: 25px;
height: 2px;
content: "";
background: linear-gradient(90deg, var(--brand), var(--portal-cyan));
}
.portal-section-head h2,
.hanoi-identity-copy h2 {
max-width: 820px;
margin: 0;
color: var(--portal-ink);
font-size: var(--fs-h2);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.28;
}
.portal-section-head > p {
max-width: 430px;
margin-bottom: 3px;
font-size: 1rem;
}
.portal-metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 13px;
margin-bottom: 16px;
}
.portal-metric {
position: relative;
display: grid;
grid-template-columns: 50px minmax(0, 1fr);
gap: 14px;
min-height: 138px;
align-items: center;
padding: 19px;
border: 1px solid rgba(19, 95, 155, 0.1);
border-radius: 16px;
background: var(--portal-card);
box-shadow: 0 10px 34px rgba(35, 96, 145, 0.07);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.portal-metric:hover {
z-index: 2;
box-shadow: var(--portal-shadow);
transform: translateY(-6px);
}
.metric-symbol {
display: grid;
width: 50px;
height: 50px;
place-items: center;
border-radius: 15px;
color: #fff;
font-size: 1.75rem;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}
.metric-symbol.cyan { background: linear-gradient(145deg, #23cdf0, #159adf); }
.metric-symbol.blue { background: linear-gradient(145deg, #3e99f5, #1767db); }
.metric-symbol.teal { background: linear-gradient(145deg, #2ed3b6, #0e9c91); }
.metric-symbol.violet { background: linear-gradient(145deg, #8b81f0, #6455d4); }
.portal-metric small,
.portal-metric em {
display: block;
}
.portal-metric small {
color: #6483a1;
font-size: 0.8125rem;
font-weight: 600;
}
.portal-metric strong {
display: block;
margin: 3px 0;
color: #0953a4;
font-size: var(--fs-h2-sm);
line-height: 1;
}
.portal-metric em {
color: #8ba2b7;
font-size: 0.75rem;
font-style: normal;
}
.portal-metric > b {
position: absolute;
right: 15px;
bottom: 14px;
color: #0aa67e;
font-size: 0.8125rem;
}
.city-command-grid {
display: grid;
grid-template-columns: 1.18fr 0.82fr;
gap: 16px;
}
.portal-card {
overflow: hidden;
border: 1px solid rgba(22, 99, 158, 0.1);
border-radius: 20px;
background: rgba(255, 255, 255, 0.97);
box-shadow: var(--portal-shadow);
}
.card-title-row {
display: flex;
min-height: 84px;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid #e4eff7;
box-sizing: border-box;
}
.card-title-row h3 {
margin: 0;
color: #0a4381;
font-size: var(--fs-h4);
line-height: 1.35;
}
.card-kicker {
margin-bottom: 2px;
font-size: 0.75rem;
}
.hanoi-map {
position: relative;
min-height: 470px;
overflow: hidden;
color: #fff;
background:
radial-gradient(circle at 60% 42%, rgba(47, 216, 255, 0.28), transparent 22%),
linear-gradient(145deg, #0b7ae6, #0b4ebc);
}
.hanoi-map::before {
position: absolute;
inset: 0;
content: "";
opacity: 0.21;
background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
background-size: 34px 34px;
}
.map-filter {
position: absolute;
z-index: 3;
top: 22px;
left: 22px;
display: grid;
width: 148px;
gap: 8px;
padding: 15px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 13px;
background: rgba(3, 47, 112, 0.52);
box-shadow: 0 16px 35px rgba(0, 25, 78, 0.2);
backdrop-filter: blur(9px);
}
.map-filter strong {
margin-bottom: 2px;
font-size: 0.8125rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.map-filter label {
display: flex;
gap: 7px;
align-items: center;
font-size: 0.75rem;
}
.map-filter input {
accent-color: #25d6d1;
}
.map-silhouette {
position: absolute;
right: 10px;
bottom: 5px;
width: 78%;
height: 94%;
}
.map-shape {
fill: url(#mapfill);
stroke: rgba(255, 255, 255, 0.65);
stroke-width: 2;
filter: drop-shadow(0 16px 30px rgba(0, 38, 103, 0.25));
}
.district-lines path {
fill: none;
stroke: rgba(255, 255, 255, 0.36);
stroke-width: 1.4;
}
.map-labels {
fill: rgba(255, 255, 255, 0.88);
font-family: "Be Vietnam Pro", sans-serif;
font-size: 11px;
font-weight: 600;
}
.map-pins circle {
fill: #64f1d2;
stroke: #fff;
stroke-width: 3;
animation: mapBlink 2.5s ease-in-out infinite alternate;
}
.map-pins circle:nth-child(even) {
fill: #ffd15c;
animation-delay: -1s;
}
.hanoi-map-real {
min-height: 470px;
color: #183f68;
background: #dcecf3;
}
.hanoi-map-real::before {
display: none;
}
.osm-map {
position: absolute;
z-index: 1;
inset: 0;
width: 100%;
height: 100%;
font-family: "Be Vietnam Pro", sans-serif;
}
.hanoi-map-real .leaflet-tile-pane {
filter: saturate(0.8) contrast(0.96) brightness(1.04);
}
.hanoi-map-real .leaflet-control-layers {
margin: 16px 16px 0 0;
overflow: hidden;
border: 1px solid rgba(25, 108, 170, 0.16);
border-radius: 13px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(24, 84, 128, 0.14);
backdrop-filter: blur(10px);
}
.hanoi-map-real .leaflet-control-layers-expanded {
min-width: 160px;
padding: 11px 13px;
color: #315f84;
font-size: 0.8125rem;
}
.hanoi-map-real .leaflet-control-layers-expanded::before {
display: block;
margin-bottom: 7px;
color: #0b559a;
content: "Lớp hiển thị";
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hanoi-map-real .leaflet-control-layers label {
margin: 5px 0;
}
.hanoi-map-real .leaflet-control-layers-selector {
accent-color: var(--brand);
}
.hanoi-map-real .leaflet-control-zoom {
overflow: hidden;
border: 1px solid rgba(24, 110, 171, 0.17);
border-radius: 11px;
box-shadow: 0 10px 25px rgba(26, 83, 128, 0.13);
}
.hanoi-map-real .leaflet-control-zoom a {
color: #0a67ad;
}
.hanoi-map-real .leaflet-control-attribution {
padding: 3px 6px;
color: #6c8294;
background: rgba(255, 255, 255, 0.84);
font-size: 8px;
}
.hanoi-map-real .leaflet-control-attribution a {
color: #0a67ad;
}
.osm-data-marker {
position: relative;
display: grid;
width: 32px;
height: 32px;
place-items: center;
border: 3px solid #fff;
border-radius: 50% 50% 50% 8px;
background: var(--marker-color, #118be0);
box-shadow: 0 7px 18px rgba(6, 78, 132, 0.28);
transform: rotate(-45deg);
}
.osm-data-marker::before {
width: 8px;
height: 8px;
border: 2px solid rgba(255, 255, 255, 0.88);
border-radius: 50%;
content: "";
}
.osm-data-marker::after {
position: absolute;
z-index: -1;
inset: -8px;
border: 1px solid var(--marker-color, #118be0);
border-radius: 50%;
content: "";
opacity: 0;
animation: osmMarkerPulse 2.4s ease-out infinite;
}
.osm-data-marker.raw { --marker-color: #63991a; }
.osm-data-marker.processing { --marker-color: #15b99d; }
.osm-data-marker.storage { --marker-color: #8a5cf6; }
.osm-data-marker.transport { --marker-color: #e2534a; }
.osm-data-marker.distribution { --marker-color: #0b74d5; }
.osm-data-marker.market { --marker-color: #f29a2e; }
.osm-data-marker.alert { --marker-color: #d8264f; }
.osm-popup {
display: grid;
min-width: 150px;
gap: 2px;
font-family: "Be Vietnam Pro", sans-serif;
}
.osm-popup small {
color: #1689c7;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.osm-popup strong {
color: #0a477f;
font-size: 0.875rem;
}
.osm-popup span {
color: #6d879c;
font-size: 0.75rem;
}
.map-data-legend {
position: absolute;
z-index: 500;
bottom: 15px;
left: 15px;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
max-width: calc(100% - 30px);
padding: 9px 11px;
border: 1px solid rgba(20, 104, 163, 0.13);
border-radius: 12px;
background: rgba(255, 255, 255, 0.93);
box-shadow: 0 10px 25px rgba(18, 77, 122, 0.12);
backdrop-filter: blur(9px);
}
.map-data-legend strong {
margin-right: 2px;
color: #0b5598;
font-size: 0.75rem;
text-transform: uppercase;
}
.map-data-legend span {
display: flex;
gap: 5px;
align-items: center;
color: #52738e;
font-size: 0.75rem;
font-weight: 600;
}
.map-data-legend i {
width: 7px;
height: 7px;
border-radius: 50%;
}
.map-data-legend i.raw { background: #63991a; }
.map-data-legend i.processing { background: #15b99d; }
.map-data-legend i.storage { background: #8a5cf6; }
.map-data-legend i.transport { background: #e2534a; }
.map-data-legend i.distribution { background: #0b74d5; }
.map-data-legend i.market { background: #f29a2e; }
.map-data-legend i.alert { background: #d8264f; }
.map-load-fallback {
display: grid;
height: 100%;
place-content: center;
padding: 30px;
color: #2d5f85;
background: linear-gradient(145deg, #e8f6fb, #dcecf3);
text-align: center;
}
.map-load-fallback strong,
.map-load-fallback span {
display: block;
}
.map-load-fallback span {
margin-top: 5px;
color: #718da3;
font-size: 0.8125rem;
}
@keyframes osmMarkerPulse {
0% { opacity: 0.62; transform: scale(0.55); }
100% { opacity: 0; transform: scale(1.45); }
}
.module-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 0 18px 18px;
}
.module-tile {
position: relative;
display: grid;
min-height: 183px;
align-content: center;
justify-items: center;
padding: 24px 16px;
border: 1px solid #e1edf7;
border-radius: 14px;
color: #185187;
background: #fbfdff;
text-align: center;
transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.module-tile:hover {
z-index: 2;
border-color: color-mix(in srgb, currentColor 35%, white);
box-shadow: 0 18px 42px rgba(25, 96, 153, 0.13);
transform: translateY(-5px);
}
.module-tile > span {
position: absolute;
top: 11px;
left: 13px;
color: currentColor;
font-size: 0.8125rem;
font-weight: 800;
}
.module-tile i {
margin-bottom: 10px;
color: currentColor;
font-size: 2rem;
font-style: normal;
line-height: 1;
}
.module-tile strong {
font-size: 0.875rem;
line-height: 1.35;
text-transform: uppercase;
}
.module-tile em {
margin-top: 5px;
color: #8aa0b4;
font-size: 0.75rem;
font-style: normal;
}
.module-tile.green { color: #0aa67e; }
.module-tile.cyan { color: #009bdd; }
.module-tile.violet { color: #6e5bd8; }
.module-tile.amber { color: #ef9714; }
.module-tile.blue { color: #276ed8; }
.module-tile.teal { color: #13a5a6; }
.trace-card {
display: flex;
flex-direction: column;
}
.trace-card .card-title-row {
flex: 0 0 auto;
}
.trace-card-flow {
--flow-line-x: 42px;
position: relative;
display: grid;
flex: 1;
align-content: center;
padding: 10px 21px 21px;
}
.trace-card-flow::before {
position: absolute;
top: 54px;
bottom: 54px;
left: var(--flow-line-x);
width: 2px;
content: "";
background: linear-gradient(#20c7e8, var(--brand), #20c7e8);
box-shadow: 0 0 14px rgba(14, 139, 220, 0.24);
}
.trace-card-flow article {
position: relative;
display: grid;
grid-template-columns: 42px 48px minmax(0, 1fr);
gap: 12px;
align-items: center;
min-height: 84px;
padding: 9px 10px 9px 0;
border-bottom: 1px solid #e5eff7;
}
.trace-card-flow article:last-child {
border-bottom: 0;
}
.trace-card-flow article > span {
z-index: 2;
display: grid;
width: 27px;
height: 27px;
place-self: center;
place-items: center;
border: 3px solid #fff;
border-radius: 50%;
color: #fff;
background: linear-gradient(145deg, var(--brand), #18bde6);
box-shadow: 0 5px 15px rgba(13, 109, 184, 0.23);
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
font-weight: 700;
}
.trace-card-flow i {
display: grid;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid #cfe5f4;
border-radius: 13px;
color: #0874c9;
background: linear-gradient(145deg, #f9fdff, #eaf7ff);
font-style: normal;
transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
.trace-card-flow i svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.7;
}
.trace-card-flow article:hover i {
color: #fff;
background: linear-gradient(145deg, var(--brand), #18bde6);
transform: translateX(3px);
}
.trace-card-flow strong,
.trace-card-flow small {
display: block;
}
.trace-card-flow strong {
color: #0b4c88;
font-size: 0.875rem;
line-height: 1.35;
}
.trace-card-flow small {
margin-top: 4px;
color: #8199ae;
font-size: 0.75rem;
line-height: 1.45;
}
.dashboard-section {
overflow: hidden;
color: #0a3e73;
padding-top: 42px;
padding-bottom: 64px;
background:
radial-gradient(circle at 14% 2%, rgba(31, 193, 232, 0.13), transparent 28%),
radial-gradient(circle at 88% 86%, rgba(23, 120, 212, 0.09), transparent 31%),
linear-gradient(180deg, #f8fdff 0%, #eef8ff 100%);
}
.dashboard-section::before {
position: absolute;
inset: 0;
content: "";
opacity: 0.42;
background-image: linear-gradient(rgba(42, 151, 213, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 151, 213, 0.1) 1px, transparent 1px);
background-size: 54px 54px;
mask-image: linear-gradient(to bottom, transparent, #000 15%, #000 85%, transparent);
}
.light-head {
position: relative;
z-index: 1;
}
.light-head h2 {
color: var(--portal-ink);
}
.light-head h2 span {
background: linear-gradient(100deg, var(--brand), #17bce5);
background-clip: text;
-webkit-background-clip: text;
}
.light-head .portal-kicker {
color: #0b66ae;
}
.light-head > p {
color: #58768f;
}
.dashboard-shell {
position: relative;
z-index: 2;
padding: 18px;
border: 1px solid rgba(21, 108, 170, 0.13);
border-radius: 24px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 28px 75px rgba(30, 102, 151, 0.13);
backdrop-filter: blur(12px);
}
.dashboard-topbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 6px 18px;
}
.dashboard-topbar > div,
.dashboard-live {
display: flex;
gap: 10px;
align-items: center;
}
.dashboard-logo {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 10px;
background: #fff;
}
.dashboard-logo img {
width: 30px;
height: 30px;
object-fit: contain;
}
.dashboard-topbar strong {
color: #0a477f;
font-size: 1rem;
}
.dashboard-live {
color: #0877bd;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.1em;
}
.dashboard-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.dashboard-grid-secondary {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 12px;
}
.chart-card {
min-height: 238px;
padding: 18px;
border: 1px solid rgba(27, 116, 177, 0.12);
border-radius: 17px;
background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.96));
box-shadow: 0 12px 28px rgba(30, 104, 155, 0.07), inset 0 1px #fff;
}
.chart-wide {
min-height: auto;
padding: 22px 24px;
}
.chart-head {
display: flex;
align-items: start;
justify-content: space-between;
margin-bottom: 16px;
}
.chart-head small,
.chart-head strong {
display: block;
}
.chart-head small {
margin-bottom: 4px;
color: #7292aa;
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
}
.chart-head strong {
color: #0a467f;
font-size: 1.5rem;
font-weight: 800;
}
.trend-up {
padding: 5px 10px;
border-radius: 999px;
color: #078c70;
background: rgba(17, 184, 139, 0.12);
font-size: 0.875rem;
font-weight: 800;
}
.line-chart {
position: relative;
height: 225px;
padding-left: 38px;
padding-bottom: 28px;
background-image: linear-gradient(rgba(52, 141, 198, 0.12) 1px, transparent 1px);
background-size: 100% 25%;
}
.line-chart svg {
width: 100%;
height: 180px;
overflow: visible;
filter: drop-shadow(0 6px 10px rgba(15, 120, 190, 0.16));
}
.chart-dates {
position: absolute;
left: 38px;
right: 10px;
bottom: 0;
height: 24px;
font-size: 0.8125rem;
color: #475569;
font-weight: 700;
pointer-events: none;
}
.chart-dates span {
position: absolute;
top: 4px;
transform: translateX(-50%);
white-space: nowrap;
}
.chart-area { fill: url(#chartArea); }
.chart-line { fill: none; stroke: #00A6E6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-points circle {
fill: #ffffff;
stroke: #00A6E6;
stroke-width: 2;
vector-effect: non-scaling-stroke;
transition: r 0.15s ease, fill 0.15s ease, stroke 0.15s ease;
}
.chart-points circle:hover {
r: 5px;
fill: #007BFF;
stroke: #ffffff;
}
.chart-dots circle { fill: #fff; stroke: #007BFF; stroke-width: 3; }
.chart-dots circle {
cursor: pointer;
pointer-events: all;
transition: r 160ms ease, fill 160ms ease, stroke-width 160ms ease;
vector-effect: non-scaling-stroke;
}
.chart-dots circle:hover,
.chart-dots circle:focus,
.chart-dots circle.is-active {
r: 8px;
fill: #0b82d2;
stroke: #fff;
stroke-width: 4;
outline: none;
}
.chart-tooltip {
position: absolute;
z-index: 5;
display: grid;
min-width: 132px;
gap: 1px;
padding: 10px 12px;
border: 1px solid rgba(18, 115, 180, 0.14);
border-radius: 11px;
opacity: 0;
color: #4d6a86;
background: rgba(255, 255, 255, 0.97);
box-shadow: 0 12px 30px rgba(22, 91, 143, 0.17);
pointer-events: none;
transform: translate(-50%, calc(-100% - 12px));
transition: opacity 140ms ease, transform 140ms ease;
}
.chart-tooltip::after {
position: absolute;
bottom: -5px;
left: calc(50% - 5px);
width: 10px;
height: 10px;
content: "";
background: #fff;
transform: rotate(45deg);
}
.chart-tooltip.is-visible {
opacity: 1;
transform: translate(-50%, calc(-100% - 8px));
}
/* Points near the top of the plot have no room above them; drop the card below
the dot and move the arrow to its top edge. */
.chart-tooltip.is-below {
transform: translate(-50%, 12px);
}
.chart-tooltip.is-below::after {
top: -5px;
bottom: auto;
}
.chart-tooltip small,
.chart-tooltip strong,
.chart-tooltip span {
position: relative;
z-index: 1;
display: block;
}
.chart-tooltip small {
color: #0d6ea1;
font-size: 0.75rem;
font-weight: 800;
}
.chart-tooltip strong {
color: #073f75;
font-size: 1rem;
}
.chart-tooltip span {
font-size: 0.75rem;
}
.axis-label {
position: absolute;
left: 0;
color: #83a0b6;
font-size: 0.75rem;
}
.axis-label.a { top: -2px; }
.axis-label.b { top: 50px; }
.axis-label.c { top: 103px; }
.axis-label.d { top: 156px; }
.chart-dates {
position: relative;
height: 16px;
margin-top: 6px;
color: #7d9ab1;
font-size: 0.75rem;
font-weight: 600;
}
.chart-dates span {
position: absolute;
transform: translateX(-50%);
white-space: nowrap;
}
.chart-dates span:first-child {
transform: translateX(0);
}
.chart-dates span:last-child {
transform: translateX(-100%);
}
.donut-wrap {
display: flex;
gap: 22px;
align-items: center;
justify-content: center;
padding-top: 18px;
}
.donut {
position: relative;
display: grid;
width: 126px;
height: 126px;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
}
.donut-ring {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
transform: rotate(-90deg);
}
.donut-track {
fill: none;
stroke: #eef4fa;
stroke-width: 16;
}
.donut-seg {
fill: none;
stroke-width: 16;
cursor: pointer;
pointer-events: stroke;
transform-box: fill-box;
transform-origin: center;
transition: transform 220ms ease, opacity 220ms ease;
}
.donut-wrap:has(.donut-seg:hover) .donut-seg:not(:hover),
.donut-wrap:has(.donut-seg.is-active) .donut-seg:not(.is-active) {
opacity: 0.45;
}
.donut-seg:hover,
.donut-seg.is-active {
transform: scale(1.08);
}
.donut-seg.dot-a { stroke: #21c9f0; }
.donut-seg.dot-b { stroke: #236ad7; }
.donut-seg.dot-c { stroke: #7c65e6; }
.donut-seg.dot-d { stroke: #ffad25; }
.donut span {
position: relative;
z-index: 1;
text-align: center;
}
.donut span strong,
.donut span small {
display: block;
transition: color 180ms ease;
}
.donut span strong { font-size: 1.125rem; }
.donut span strong { color: #0a467f; }
.donut span small { color: #7896ae; font-size: 0.75rem; }
.donut-wrap:has(li:hover) li:not(:hover) {
opacity: 0.5;
}
.donut-wrap ul {
display: grid;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
color: #607f98;
font-size: 0.75rem;
}
.donut-wrap li {
display: flex;
gap: 7px;
align-items: center;
cursor: pointer;
transition: opacity 180ms ease;
}
.donut-wrap li b {
margin-left: 3px;
color: #0a467f;
font-weight: 800;
}
.donut-wrap li i,
.alert-legend i {
width: 7px;
height: 7px;
border-radius: 50%;
}
.dot-a { background: #21c9f0; }
.dot-b { background: #236ad7; }
.dot-c { background: #7c65e6; }
.dot-d { background: #ffad25; }
.ranking-card {
display: grid;
align-content: start;
}
.bar-row {
display: grid;
grid-template-columns: 90px 1fr 38px;
gap: 9px;
align-items: center;
margin: 5px 0;
padding: 6px 8px;
border-radius: 10px;
color: #66869f;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), background 0.22s ease, box-shadow 0.22s ease;
}
.bar-row:hover {
transform: scale(1.04) translateX(3px);
background: rgba(0, 166, 230, 0.08);
box-shadow: 0 4px 14px rgba(0, 123, 255, 0.12);
}
.bar-row i {
height: 7px;
border-radius: 999px;
background: linear-gradient(90deg, #18bff0 var(--value), rgba(63, 139, 192, 0.12) var(--value));
transition: filter 0.2s ease;
}
.bar-row:hover i {
filter: brightness(1.15);
}
.bar-row b {
color: #0a568f;
text-align: right;
transition: color 0.2s ease, transform 0.2s ease;
}
.bar-row:hover b {
color: #007BFF;
transform: scale(1.08);
}
.alert-card {
display: grid;
grid-template-columns: 104px 1fr;
align-items: center;
gap: 10px;
}
.alert-card .chart-head {
grid-column: 1 / -1;
}
.alert-orbit {
position: relative;
display: grid;
width: 96px;
height: 96px;
place-items: center;
border: 1px solid rgba(34, 155, 211, 0.2);
border-radius: 50%;
margin: 0 auto;
}
.alert-orbit::before {
position: absolute;
width: 58px;
height: 58px;
border-radius: 50%;
content: "";
background: linear-gradient(145deg, #15b7e9, #0b65d0);
box-shadow: 0 0 24px rgba(19, 183, 233, 0.25);
}
.alert-orbit span {
position: relative;
z-index: 1;
font-size: 1rem;
font-weight: 800;
color: #fff;
}
.alert-orbit i {
position: absolute;
width: 7px;
height: 7px;
border-radius: 50%;
background: #47e2ff;
box-shadow: 0 0 10px #47e2ff;
}
.orbit-a { top: 6px; left: 18px; }
.orbit-b { right: 3px; bottom: 28px; }
.orbit-c { bottom: 2px; left: 32px; }
.alert-legend {
display: flex;
flex-direction: column;
gap: 8px;
}
.alert-legend span {
display: flex;
align-items: center;
gap: 6px;
color: #66869f;
font-size: 0.8125rem;
font-weight: 600;
white-space: nowrap;
}
.alert-legend span b {
margin-left: auto;
color: #0a568f;
font-weight: 800;
}
.alert-legend .ok { background: #31d8a1; }
.alert-legend .warn { background: #ffc25a; }
.alert-legend .danger { background: #ff6b72; }
/* Quality Card Single Line Fix */
.quality-card .bar-row {
grid-template-columns: max-content 1fr 34px;
gap: 8px;
white-space: nowrap;
}
.quality-card .bar-row span {
font-size: 0.75rem;
font-weight: 600;
white-space: nowrap;
}
.process-section {
background: #f6fbff;
}
.trace-flow {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
gap: 10px;
align-items: stretch;
padding: 24px;
border: 1px solid #d9eaf7;
border-radius: 22px;
background: #fff;
box-shadow: var(--portal-shadow);
}
.trace-flow article {
position: relative;
display: grid;
min-height: 208px;
align-content: center;
justify-items: center;
padding: 20px 12px;
border-radius: 15px;
color: #0e5ba7;
background: linear-gradient(150deg, #f7fcff, #edf8ff);
text-align: center;
transition: transform 0.3s ease, background 0.3s ease;
}
.trace-flow article:hover {
color: #fff;
background: linear-gradient(145deg, var(--brand), #16bbe5);
transform: translateY(-6px);
}
.trace-flow article > span {
position: absolute;
top: 13px;
left: 14px;
color: currentColor;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
}
.trace-flow i {
display: grid;
width: 62px;
height: 62px;
margin-bottom: 14px;
place-items: center;
border: 1px solid currentColor;
border-radius: 17px;
font-size: 1.75rem;
font-style: normal;
}
.trace-flow strong,
.trace-flow small {
display: block;
}
.trace-flow strong {
font-size: 0.875rem;
}
.trace-flow small {
margin-top: 4px;
color: #819bb2;
font-size: 0.75rem;
}
.trace-flow article:hover small {
color: rgba(255, 255, 255, 0.78);
}
.trace-flow > b {
align-self: center;
color: #7bbce6;
font-size: 1.25rem;
font-weight: 400;
}
.hanoi-identity-section {
background: #fff;
}
.hanoi-identity-grid {
display: grid;
grid-template-columns: 1.12fr 0.88fr;
gap: 62px;
align-items: center;
}
.hanoi-photo {
position: relative;
min-height: 420px;
margin: 0;
overflow: hidden;
border-radius: 28px 90px 28px 28px;
box-shadow: 0 32px 80px rgba(26, 91, 145, 0.17);
}
.hanoi-photo::after {
position: absolute;
inset: 0;
content: "";
background: linear-gradient(0deg, rgba(4, 44, 91, 0.7), transparent 42%);
}
.hanoi-photo img {
width: 100%;
height: 420px;
object-fit: cover;
object-position: center;
}
.hanoi-photo figcaption {
position: absolute;
z-index: 2;
right: 25px;
bottom: 23px;
left: 25px;
display: flex;
gap: 10px;
align-items: center;
color: #fff;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hanoi-photo figcaption span {
width: 9px;
height: 9px;
border-radius: 50%;
background: #33d8ed;
box-shadow: 0 0 15px #33d8ed;
}
.hanoi-identity-copy > p {
max-width: 590px;
margin: 24px 0 30px;
}
.identity-features {
display: grid;
gap: 10px;
margin-bottom: 30px;
}
.identity-features article {
display: grid;
grid-template-columns: 48px 1fr;
gap: 16px;
align-items: center;
padding: 15px 17px;
border: 1px solid #e2edf6;
border-radius: 14px;
background: #f9fcff;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.identity-features article:hover {
border-color: rgba(12, 124, 216, 0.34);
transform: translateX(6px);
}
.identity-features i {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 12px;
color: var(--brand);
background: #eaf7ff;
font-size: 0.8125rem;
font-style: normal;
font-weight: 800;
}
.identity-features strong,
.identity-features small {
display: block;
}
.identity-features strong {
color: #0c4a89;
font-size: 1rem;
}
.identity-features small {
color: #4d6a86;
font-size: 0.8125rem;
}
.partners-section {
overflow: hidden;
background:
linear-gradient(rgba(236, 248, 255, 0.92), rgba(243, 251, 255, 0.97)),
repeating-linear-gradient(0deg, transparent 0 49px, #d7eafa 50px),
repeating-linear-gradient(90deg, transparent 0 49px, #d7eafa 50px);
}
.compact-head {
margin-bottom: 50px;
}
.compact-head h2 {
max-width: 760px;
font-size: var(--fs-h2);
}
.partners-section .eyebrow {
gap: 11px;
margin-bottom: 16px;
color: #0b66ae;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.13em;
}
.partners-section .eyebrow::before {
width: 30px;
height: 2px;
background: linear-gradient(90deg, var(--brand), #22c5eb);
}
.partners-section .eyebrow .ht-highlight {
background: linear-gradient(100deg, var(--brand), #14bde8);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.partner-rail {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, 170px);
gap: 28px 80px;
min-height: 680px;
align-items: center;
padding: 42px 70px 76px;
overflow: hidden;
border: 1px solid rgba(27, 126, 197, 0.14);
border-radius: 30px;
background:
radial-gradient(circle at 50% 50%, rgba(26, 190, 235, 0.15), transparent 25%),
linear-gradient(rgba(243, 251, 255, 0.9), rgba(233, 247, 255, 0.94)),
repeating-linear-gradient(0deg, transparent 0 44px, rgba(42, 145, 207, 0.11) 45px),
repeating-linear-gradient(90deg, transparent 0 44px, rgba(42, 145, 207, 0.11) 45px);
box-shadow: 0 30px 80px rgba(20, 92, 145, 0.12);
isolation: isolate;
}
.partner-rail.reveal,
.partner-rail.reveal.is-visible {
transform: none;
}
.partner-rail::before,
.partner-rail::after {
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
border: 1px solid rgba(15, 133, 205, 0.13);
border-radius: 50%;
content: "";
transform: translate(-50%, -50%);
}
.partner-rail::before {
width: 420px;
height: 420px;
box-shadow: 0 0 0 54px rgba(23, 174, 226, 0.025), 0 0 0 108px rgba(23, 174, 226, 0.018);
}
.partner-rail::after {
width: 610px;
height: 610px;
border-style: dashed;
animation: orbitSpin 34s linear infinite;
}
.ecosystem-links {
position: absolute;
z-index: 0;
inset: 0;
width: 100%;
height: calc(100% - 45px);
pointer-events: none;
}
.eco-static-lines path {
fill: none;
stroke: url("#ecoLine");
stroke-width: 1.8;
stroke-dasharray: 5 7;
vector-effect: non-scaling-stroke;
}
.eco-data-packets circle {
fill: #17c8ed;
stroke: #fff;
stroke-width: 2;
}
.ecosystem-node,
.partner-core {
position: relative;
z-index: 2;
display: grid;
width: min(100%, 215px);
min-height: 132px;
justify-self: center;
place-items: center;
align-content: center;
padding: 16px 14px;
text-align: center;
}
.ecosystem-node {
border: 1px solid rgba(23, 117, 184, 0.12);
border-radius: 19px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 16px 42px rgba(20, 89, 142, 0.12);
backdrop-filter: blur(9px);
transition: transform 0.32s ease, box-shadow 0.32s ease, border-color 0.32s ease;
}
.ecosystem-node:hover {
border-color: rgba(15, 132, 211, 0.35);
box-shadow: 0 24px 55px rgba(12, 102, 172, 0.19);
transform: translateY(-7px) scale(1.015);
}
.ecosystem-node img {
width: 52px;
height: 44px;
margin-bottom: 8px;
object-fit: contain;
}
.ecosystem-node.wide-logo img {
width: 118px;
}
.ecosystem-node span {
color: #25577f;
font-size: 0.8125rem;
font-weight: 800;
line-height: 1.35;
}
.ecosystem-node small {
margin-top: 3px;
color: #4d6a86;
font-size: 0.75rem;
}
.ecosystem-node.node-tl { grid-column: 1; grid-row: 1; }
.ecosystem-node.node-tc { grid-column: 2; grid-row: 1; }
.ecosystem-node.node-tr { grid-column: 3; grid-row: 1; }
.ecosystem-node.node-ml { grid-column: 1; grid-row: 2; }
.ecosystem-node.node-mr { grid-column: 3; grid-row: 2; }
.ecosystem-node.node-bl { grid-column: 1; grid-row: 3; }
.ecosystem-node.node-bc { grid-column: 2; grid-row: 3; }
.ecosystem-node.node-br { grid-column: 3; grid-row: 3; }
.partner-core {
grid-column: 2;
grid-row: 2;
width: 220px;
height: 220px;
min-height: 220px;
padding: 25px;
color: #fff;
border: 1px solid rgba(255,255,255,.82);
border-radius: 50%;
background: radial-gradient(circle at 35% 25%, #42dcf1, var(--brand) 56%, #0054b6);
box-shadow: 0 0 0 12px rgba(32, 201, 236, 0.08), 0 24px 62px rgba(8, 104, 190, 0.24);
}
.partner-core::before,
.partner-core::after {
position: absolute;
border: 1px dashed rgba(23, 158, 218, 0.28);
border-radius: 50%;
content: "";
animation: orbitSpin 20s linear infinite;
}
.partner-core::before { inset: -20px; }
.partner-core::after { inset: -35px; animation-direction: reverse; animation-duration: 27s; }
.partner-core img {
width: 67px;
height: 67px;
margin-bottom: 5px;
border-radius: 50%;
background: #fff;
object-fit: contain;
}
.partner-core strong,
.partner-core small {
display: block;
}
.partner-core strong {
font-size: 1rem;
}
.partner-core small {
opacity: 0.82;
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.12em;
}
.partner-core > b {
display: flex;
gap: 6px;
align-items: center;
margin-top: 9px;
padding: 6px 9px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
background: rgba(2, 72, 151, 0.24);
font-size: 0.75rem;
font-weight: 700;
}
.partner-core > b i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #62f1c5;
box-shadow: 0 0 9px #62f1c5;
}
.core-orbit-dot {
position: absolute;
inset: -27px;
border: 1px solid transparent;
border-radius: 50%;
animation: orbitSpin 8s linear infinite;
}
.core-orbit-dot::after {
position: absolute;
top: 19px;
right: 23px;
width: 9px;
height: 9px;
border: 3px solid #effaff;
border-radius: 50%;
content: "";
background: #16c9ec;
box-shadow: 0 0 14px #16c9ec;
}
.ecosystem-more {
border-style: dashed;
background: rgba(243, 251, 255, 0.9);
}
.ecosystem-more > b {
display: grid;
width: 38px;
height: 38px;
margin-bottom: 7px;
place-items: center;
border-radius: 12px;
color: var(--brand);
background: #e1f4ff;
font-size: 1.25rem;
}
.ecosystem-legend {
position: absolute;
z-index: 3;
right: 24px;
bottom: 17px;
left: 24px;
display: flex;
gap: 8px;
align-items: center;
}
.ecosystem-legend span {
padding: 5px 9px;
border: 1px solid rgba(19, 116, 185, 0.12);
border-radius: 999px;
color: #567a99;
background: rgba(255, 255, 255, 0.74);
font-family: "IBM Plex Mono", monospace;
font-size: 0.75rem;
letter-spacing: 0.06em;
}
.ecosystem-legend span:first-child {
display: flex;
gap: 6px;
align-items: center;
margin-right: auto;
}
.ecosystem-legend span:first-child i {
width: 6px;
height: 6px;
border-radius: 50%;
background: #16c9ec;
box-shadow: 0 0 9px #16c9ec;
}
.ecosystem-partners {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid rgba(19, 116, 185, 0.12);
}
.ecosystem-partners-label {
display: block;
margin-bottom: 12px;
color: #567a99;
font-family: "IBM Plex Mono", monospace;
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.ecosystem-partners ul {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.ecosystem-partners li {
padding: 7px 14px;
border: 1px solid rgba(19, 116, 185, 0.14);
border-radius: 999px;
background: #f3fbff;
color: var(--brand, #1374b9);
font-size: 0.82rem;
font-weight: 500;
}
.portal-cta {
padding: 75px 0;
background: #f8fdff;
}
.portal-cta-inner {
position: relative;
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 70px;
align-items: center;
overflow: hidden;
padding: 60px 65px;
border-radius: 28px;
color: #fff;
background:
radial-gradient(circle at 87% 25%, rgba(66, 220, 241, 0.28), transparent 28%),
linear-gradient(125deg, #0054b6, #087be6 58%, #20bce3);
box-shadow: 0 30px 80px rgba(9, 74, 139, 0.2);
}
.portal-cta-inner::after {
position: absolute;
right: -100px;
bottom: -170px;
width: 420px;
height: 420px;
border: 1px solid rgba(95, 221, 255, 0.18);
border-radius: 50%;
content: "";
box-shadow: 0 0 0 45px rgba(95, 221, 255, 0.04), 0 0 0 90px rgba(95, 221, 255, 0.025);
}
.portal-cta-inner .portal-kicker {
color: #8bddff;
}
.portal-cta-inner h2 {
margin: 0;
color: #fff;
font-size: var(--fs-h2);
letter-spacing: -0.02em;
line-height: 1.28;
}
.portal-cta-inner h2 span {
color: #78e7ff;
}
.portal-cta-inner > div:last-child {
position: relative;
z-index: 2;
}
.portal-cta-inner p {
color: #b9d6ea;
}
.portal-cta-inner .btn {
background: linear-gradient(110deg, #087be6, #20c9ec);
}
.portal-home .site-footer {
color: var(--portal-ink);
border-top: 1px solid #dceaf4;
background: #fff;
}
.portal-home .site-footer p,
.portal-home .footer-links a,
.portal-home .footer-links span,
.portal-home .footer-bottom {
color: #1e293b;
}
.portal-home .footer-links span {
color: #334155;
font-weight: 500;
}
.portal-home .footer-kicker {
color: #0b5ca6;
}
.news-section {
position: relative;
overflow: hidden;
background:
radial-gradient(circle at 12% 18%, rgba(36, 188, 232, 0.1), transparent 27%),
linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
}
.news-section::before {
position: absolute;
top: 90px;
right: -150px;
width: 440px;
height: 440px;
border: 1px solid rgba(27, 157, 217, 0.1);
border-radius: 50%;
content: "";
box-shadow:
0 0 0 54px rgba(27, 157, 217, 0.025),
0 0 0 108px rgba(27, 157, 217, 0.018);
pointer-events: none;
}
.news-head {
position: relative;
z-index: 1;
}
.news-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
}
.news-secondary-grid {
display: flex;
grid-column: span 6;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(18, 105, 166, 0.12);
border-radius: 20px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 15px 42px rgba(24, 93, 143, 0.09);
}
.news-secondary-grid .news-card {
grid-column: auto;
min-width: 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid rgba(18, 105, 166, 0.1);
background: none;
box-shadow: none;
transform: none !important;
}
.news-secondary-grid .news-card:last-child {
border-bottom: 0;
}
.news-secondary-grid .news-card:hover {
background: rgba(233, 247, 255, 0.6);
}
.news-secondary-grid .news-card > a {
display: grid;
grid-template-columns: 76px minmax(0, 1fr);
gap: 14px;
align-items: center;
padding: 13px 16px;
}
.news-secondary-grid .news-card figure {
height: 76px;
border-radius: 12px;
}
.news-secondary-grid .news-card:hover figure img {
transform: none;
}
.news-secondary-grid .news-copy {
display: grid;
min-height: 0;
align-content: center;
padding: 0;
}
.news-secondary-grid .news-copy small {
min-height: 0;
font-size: 0.75rem;
line-height: 1.4;
}
.news-secondary-grid .news-copy h3 {
display: -webkit-box;
overflow: hidden;
margin: 5px 0 0;
font-size: var(--fs-h4);
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.news-card {
grid-column: span 2;
overflow: hidden;
border: 1px solid rgba(18, 105, 166, 0.12);
border-radius: 20px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 15px 42px rgba(24, 93, 143, 0.09);
transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}
.news-card:hover {
border-color: rgba(15, 143, 213, 0.25);
box-shadow: 0 22px 52px rgba(22, 94, 147, 0.15);
transform: translateY(-5px);
}
.news-card > a {
display: flex;
height: 100%;
flex-direction: column;
color: inherit;
}
.news-card figure {
position: relative;
height: 190px;
overflow: hidden;
margin: 0;
background: #dcecf5;
}
.news-card figure::after {
position: absolute;
inset: 42% 0 0;
background: linear-gradient(transparent, rgba(4, 47, 88, 0.14));
content: "";
}
.news-card figure img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 550ms cubic-bezier(0.2, 0.65, 0.25, 1);
}
.news-card:hover figure img {
transform: scale(1.045);
}
.news-copy {
display: flex;
min-height: 210px;
flex: 1;
flex-direction: column;
padding: 22px 20px 20px;
}
.news-copy small {
color: #0d6ea1;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.news-copy h3 {
margin: 10px 0 15px;
color: #093967;
font-size: var(--fs-h3);
line-height: 1.42;
}
.news-copy p {
margin: 0 0 20px;
color: #4d6a86;
font-size: 0.875rem;
line-height: 1.7;
}
.news-featured {
grid-column: span 6;
}
.news-featured figure {
height: 250px;
}
.news-featured .news-copy {
min-height: 210px;
padding: 25px 27px 24px;
}
.news-featured .news-copy h3 {
max-width: 700px;
margin-bottom: 12px;
font-size: var(--fs-h3);
line-height: 1.32;
}
@keyframes portalPulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(28, 207, 156, 0.1); }
50% { box-shadow: 0 0 0 8px rgba(28, 207, 156, 0); }
}
@keyframes portalWave {
from { height: 20%; opacity: 0.45; }
to { height: var(--h, 90%); opacity: 1; }
}
@keyframes mapBlink {
from { opacity: 0.65; }
to { opacity: 1; transform: scale(1.15); transform-origin: center; }
}
@keyframes orbitSpin {
to { transform: rotate(360deg); }
}
@media (max-width: 1120px) {
.portal-hero-layout {
grid-template-columns: minmax(0, 1fr) 220px;
gap: 30px;
}
.portal-hero h1 { font-size: var(--fs-display); }
.lookup-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lookup-kpi:nth-child(3n) { border-right: 0; }
.lookup-kpi:nth-child(-n+3) { border-bottom: 1px solid rgba(31, 120, 183, 0.14); }
.portal-metrics { grid-template-columns: repeat(2, 1fr); }
.dashboard-grid-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.partner-rail {
gap: 24px 34px;
padding-right: 36px;
padding-left: 36px;
}
.partner-core {
width: 200px;
height: 200px;
min-height: 200px;
}
}
@media (max-width: 900px) {
.portal-hero {
min-height: auto;
padding-bottom: 30px;
}
.portal-hero-image {
object-position: 65% center;
}
.portal-hero-wash {
background: linear-gradient(90deg, rgba(247,253,255,.97), rgba(247,253,255,.88) 70%, rgba(247,253,255,.4));
}
.portal-hero-layout {
grid-template-columns: 1fr;
gap: 30px;
}
.portal-hero-copy {
padding: 30px 0 10px;
}
.hero-qr-badge {
display: none;
}
.city-command-grid,
.hanoi-identity-grid {
grid-template-columns: 1fr;
}
.hanoi-identity-grid { gap: 45px; }
.hanoi-photo,
.hanoi-photo img { min-height: 510px; height: 510px; }
.trace-flow {
grid-template-columns: 1fr;
}
.trace-flow > b {
justify-self: center;
transform: rotate(90deg);
}
.trace-flow article { min-height: 170px; }
.news-grid {
grid-template-columns: 1fr;
}
.news-card,
.news-featured {
grid-column: 1;
}
.news-secondary-grid {
grid-column: 1;
}
.portal-cta-inner {
grid-template-columns: 1fr;
gap: 28px;
padding: 52px 40px;
}
}
@media (max-width: 720px) {
.portal-home .site-header {
background: rgba(255, 255, 255, 0.96);
}
.portal-home .nav-links {
color: #fff;
background: #063b78;
}
.portal-home .nav-link,
.portal-home .nav-trigger {
color: #e7f5ff;
}
.portal-hero {
padding-top: 76px;
}
.portal-hero-copy {
padding: 20px 0 10px;
}
.hero-title-main {
font-size: var(--fs-h2);
line-height: 1.25;
}
.portal-hero-points {
flex-wrap: wrap;
gap: 8px;
font-size: 0.875rem;
}
.portal-hero-actions {
align-items: stretch;
flex-direction: column;
}
.portal-hero-actions .btn { width: 100%; }
.hero-search-panel {
border-radius: 18px;
padding: 10px 14px;
}
.hero-search-input-wrap {
flex-wrap: wrap;
}
.hero-search-btn {
width: 100%;
justify-content: center;
}
.lookup-shell { margin-top: 10px; }
.lookup-panel {
grid-template-columns: 42px 1fr;
padding: 13px;
border-radius: 17px;
}
.lookup-panel .btn {
grid-column: 1 / -1;
width: 100%;
}
.lookup-icon {
width: 42px;
height: 42px;
}
.lookup-types {
gap: 9px 16px;
flex-wrap: wrap;
font-size: 0.75rem;
}
.lookup-kpi-strip {
grid-template-columns: none;
grid-auto-columns: 232px;
grid-auto-flow: column;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-snap-type: inline mandatory;
scrollbar-width: none;
}
.lookup-kpi-strip::-webkit-scrollbar { display: none; }
.lookup-kpi {
scroll-snap-align: start;
}
.portal-section {
padding: 50px 0;
}
.portal-overview { padding-top: 40px; padding-bottom: 30px; }
.dashboard-section { padding-top: 36px; padding-bottom: 50px; }
.portal-section-head {
display: grid;
gap: 18px;
margin-bottom: 30px;
}
.portal-section-head h2,
.hanoi-identity-copy h2 {
}
.portal-metrics { grid-template-columns: 1fr; }
.portal-metric { min-height: 120px; }
.hanoi-map { min-height: 430px; }
.hanoi-map-real { min-height: 500px; }
.map-data-legend {
right: 12px;
bottom: 12px;
left: 12px;
flex-wrap: wrap;
}
.map-data-legend strong { width: 100%; }
.hanoi-map-real .leaflet-control-layers-expanded {
min-width: 145px;
}
.news-grid {
grid-template-columns: 1fr;
}
.news-secondary-grid .news-card > a {
grid-template-columns: 64px minmax(0, 1fr);
gap: 12px;
padding: 11px 14px;
}
.news-secondary-grid .news-card figure {
height: 64px;
}
.news-card,
.news-featured {
grid-column: 1;
}
.news-card figure,
.news-featured figure {
height: 220px;
}
.news-copy,
.news-featured .news-copy {
min-height: 0;
}
.map-filter { width: 135px; }
.map-silhouette { right: -40px; width: 105%; }
.module-grid { grid-template-columns: 1fr 1fr; }
.module-tile { min-height: 165px; }
.trace-card-flow {
--flow-line-x: 35px;
padding: 10px 16px 18px;
}
.trace-card-flow article {
grid-template-columns: 38px 44px minmax(0, 1fr);
min-height: 78px;
}
.dashboard-shell { padding: 11px; }
.dashboard-grid-secondary { grid-template-columns: 1fr; }
.chart-card { min-height: 230px; }
.dashboard-topbar > div strong { display: none; }
.donut-wrap { justify-content: start; }
.alert-card { grid-template-columns: 140px 1fr; }
.hanoi-photo,
.hanoi-photo img { min-height: 420px; height: 420px; }
.partner-rail {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: auto;
gap: 12px;
min-height: 0;
padding: 28px 18px 78px;
}
.partner-rail::before,
.partner-rail::after,
.ecosystem-links { display: none; }
.ecosystem-node {
grid-column: auto !important;
grid-row: auto !important;
width: 100%;
}
.partner-core {
grid-column: 1 / -1;
grid-row: 1;
width: 190px;
height: 190px;
min-height: 190px;
margin: 14px 0 25px;
}
.ecosystem-node { min-height: 130px; }
.ecosystem-legend {
gap: 5px;
flex-wrap: wrap;
}
.ecosystem-legend span:first-child {
width: 100%;
margin-right: 0;
}
.portal-cta { padding: 45px 0; }
.portal-cta-inner {
padding: 38px 25px;
border-radius: 21px;
}
.portal-cta-inner h2 { font-size: var(--fs-h2); }
}
/* ==========================================================================
HANOITRACE city supply-chain modules — reference composition, 28/07/2026
========================================================================== */
.platform-intro-section {
position: relative;
overflow: hidden;
padding: 92px 0 84px;
background:
radial-gradient(circle at 7% 15%, rgba(32, 201, 236, 0.09), transparent 28%),
linear-gradient(180deg, #ffffff, #f7fcff);
}
.platform-intro-section::after {
position: absolute;
top: -180px;
right: -120px;
width: 520px;
height: 520px;
border: 1px solid rgba(8, 123, 230, 0.08);
border-radius: 50%;
box-shadow:
0 0 0 70px rgba(8, 123, 230, 0.025),
0 0 0 140px rgba(32, 201, 236, 0.018);
content: "";
pointer-events: none;
}
.platform-intro-grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 0.82fr 1.68fr;
gap: 66px;
align-items: center;
}
.platform-intro-copy h2,
.supply-chain-head h2,
.audience-head h2 {
margin: 20px 0 20px;
color: var(--portal-ink);
font-size: var(--fs-h2);
letter-spacing: -0.02em;
}
.platform-intro-copy h2 span,
.supply-chain-head h2 span,
.audience-head h2 span {
color: transparent;
background: linear-gradient(105deg, var(--brand), var(--portal-cyan));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.platform-intro-copy p {
max-width: 540px;
margin-bottom: 30px;
color: #496f92;
font-size: 1rem;
}
.text-action {
display: inline-flex;
gap: 18px;
align-items: center;
padding: 12px 18px;
color: var(--brand);
border: 1px solid rgba(8, 123, 230, 0.24);
border-radius: 10px;
font-size: 1rem;
font-weight: 700;
transition: 180ms ease;
}
.text-action:hover {
color: #fff;
background: var(--brand);
border-color: var(--brand);
transform: translateY(-2px);
}
.capability-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
}
.capability-card {
position: relative;
display: flex;
min-width: 0;
min-height: 226px;
padding: 26px 17px 20px;
flex-direction: column;
border: 1px solid rgba(8, 123, 230, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 14px 34px rgba(30, 113, 173, 0.07);
transition: 220ms ease;
}
.capability-card::before {
position: absolute;
inset: 0 0 auto;
height: 3px;
border-radius: 16px 16px 0 0;
background: linear-gradient(90deg, var(--brand), var(--portal-cyan));
content: "";
opacity: 0;
transition: 220ms ease;
}
.capability-card:hover {
border-color: rgba(8, 123, 230, 0.3);
box-shadow: 0 22px 50px rgba(8, 103, 181, 0.13);
transform: translateY(-7px);
}
.capability-card:hover::before {
opacity: 1;
}
.capability-icon {
display: grid;
width: 52px;
height: 52px;
margin-bottom: 28px;
place-items: center;
color: var(--brand);
border: 1px solid rgba(8, 123, 230, 0.13);
border-radius: 14px;
background: linear-gradient(145deg, #f8fdff, #e5f6ff);
}
.capability-icon svg {
width: 28px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.capability-card strong {
margin-bottom: 10px;
color: var(--portal-ink);
font-size: 1rem;
line-height: 1.35;
}
.capability-card small {
color: #4d6a86;
font-size: 0.875rem;
line-height: 1.55;
}
.lookup-kpi-main .realtime-value {
color: var(--portal-teal);
font-size: var(--fs-h3);
letter-spacing: -0.04em;
}
.supply-chain-section {
position: relative;
padding: 88px 0 96px;
color: var(--portal-ink);
background:
linear-gradient(rgba(8, 123, 230, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 123, 230, 0.035) 1px, transparent 1px),
#f4fbff;
background-size: 42px 42px;
}
.supply-chain-head {
display: grid;
grid-template-columns: 1.45fr 0.7fr;
gap: 70px;
align-items: end;
margin-bottom: 52px;
}
.supply-chain-head p {
margin-bottom: 17px;
color: #577995;
}
.supply-chain-flow {
position: relative;
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 0;
}
.supply-chain-flow::before {
position: absolute;
z-index: 0;
top: 14px;
right: 5%;
left: 5%;
height: 2px;
background: linear-gradient(90deg, #0f8658, #067eac 28%, #285fd0 50%, #8a52c7 72%, #a2691b 88%, #c94c41);
content: "";
}
.chain-step {
position: relative;
z-index: 1;
min-width: 0;
padding: 0 6px;
text-align: center;
}
.chain-step b {
display: grid;
width: 30px;
height: 30px;
margin: 0 auto 11px;
place-items: center;
color: #fff;
border: 4px solid #f4fbff;
border-radius: 50%;
background: var(--step-color);
box-shadow: 0 7px 18px color-mix(in srgb, var(--step-color) 28%, transparent);
font: 700 var(--fs-caption)/1.4 "IBM Plex Mono", monospace;
}
.chain-photo {
position: relative;
width: 100%;
aspect-ratio: 4 / 3;
margin: 0 auto 17px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--step-color) 26%, transparent);
border-radius: 18px 18px 18px 6px;
background: color-mix(in srgb, var(--step-color) 7%, #fff);
box-shadow: 0 13px 28px color-mix(in srgb, var(--step-color) 13%, transparent);
}
.chain-photo::after {
position: absolute;
inset: auto 0 0;
height: 38%;
background: linear-gradient(transparent, color-mix(in srgb, var(--step-color) 22%, rgba(0, 28, 60, 0.28)));
content: "";
pointer-events: none;
}
.chain-photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1), filter 300ms ease;
}
.chain-step:hover .chain-photo img {
filter: saturate(1.06) contrast(1.03);
transform: scale(1.075);
}
.chain-step strong {
display: block;
min-height: 42px;
color: var(--portal-ink);
font-size: 0.875rem;
line-height: 1.35;
text-transform: uppercase;
}
.chain-step small {
display: block;
margin-top: 10px;
color: #738da3;
font-size: 0.75rem;
line-height: 1.55;
}
.audience-section {
padding: 94px 0 100px;
color: var(--portal-ink);
background: #fff;
}
.audience-head {
margin-bottom: 44px;
}
.audience-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.audience-card {
position: relative;
display: grid;
min-height: 430px;
overflow: hidden;
grid-template-rows: 1fr 190px;
border: 1px solid rgba(8, 123, 230, 0.13);
border-radius: 24px;
background: #f8fcff;
box-shadow: 0 20px 55px rgba(8, 86, 151, 0.1);
transition: 240ms ease;
}
.audience-card:hover {
box-shadow: 0 30px 70px rgba(8, 86, 151, 0.17);
transform: translateY(-7px);
}
.audience-copy {
padding: 30px 30px 24px;
}
.audience-copy > span {
color: var(--card-accent, var(--brand));
font: 700 var(--fs-caption)/1.4 "IBM Plex Mono", monospace;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.audience-copy h3 {
margin: 15px 0 18px;
color: var(--portal-ink);
font-size: var(--fs-h3);
}
.audience-copy ul {
display: grid;
gap: 8px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.audience-copy li {
position: relative;
padding-left: 18px;
color: #4d6a86;
font-size: 0.875rem;
}
.audience-copy li::before {
position: absolute;
top: 0.65em;
left: 0;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--card-accent, var(--brand));
content: "";
}
.audience-copy a {
display: inline-flex;
gap: 16px;
align-items: center;
color: var(--card-accent, var(--brand));
font-size: 0.875rem;
font-weight: 700;
}
.audience-card figure {
position: relative;
height: 190px;
margin: 0;
overflow: hidden;
}
.audience-card figure::after {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--card-accent, var(--brand)) 28%, transparent));
content: "";
}
.audience-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 500ms ease;
}
.audience-card:hover img {
transform: scale(1.045);
}
.audience-government { --card-accent: #0a6ac4; }
.audience-business { --card-accent: #0a7351; }
.audience-citizen { --card-accent: #a35c00; }
.technology-section {
padding: 30px 0 38px;
color: var(--portal-ink);
border-top: 1px solid rgba(8, 123, 230, 0.1);
border-bottom: 1px solid rgba(8, 123, 230, 0.1);
background: #f3fbff;
}
/* This is a real so the section joins the document outline, but the strip
it labels is a compact utility row — a full-size heading would overpower it,
so it keeps the quiet mono-label treatment one step above the 12px floor. */
.technology-title {
display: block;
margin-bottom: 22px;
color: var(--brand);
font: 700 var(--fs-sm)/1.4 "IBM Plex Mono", monospace;
letter-spacing: 0.14em;
}
.technology-rail {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.technology-rail article {
display: flex;
min-width: 0;
gap: 11px;
align-items: center;
padding: 3px 15px;
border-right: 1px solid rgba(8, 123, 230, 0.1);
}
.technology-rail article:first-child { padding-left: 0; }
.technology-rail article:last-child { border-right: 0; }
.technology-rail i {
display: grid;
width: 34px;
height: 34px;
flex: 0 0 34px;
place-items: center;
color: var(--brand);
border-radius: 10px;
background: rgba(8, 123, 230, 0.08);
font-size: 1rem;
font-style: normal;
}
.technology-rail strong,
.technology-rail small {
display: block;
}
.technology-rail strong {
margin-bottom: 3px;
color: var(--portal-ink);
font-size: 0.8125rem;
}
.technology-rail small {
color: #4d6a86;
font-size: 0.75rem;
line-height: 1.4;
}
.news-secondary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1180px) {
.platform-intro-grid {
grid-template-columns: 1fr;
}
.capability-grid {
grid-template-columns: repeat(3, 1fr);
}
.capability-card {
min-height: 190px;
}
.supply-chain-flow {
grid-template-columns: repeat(5, 1fr);
row-gap: 42px;
}
.supply-chain-flow::before {
display: none;
}
.technology-rail {
grid-template-columns: repeat(4, 1fr);
row-gap: 20px;
}
.technology-rail article:nth-child(4) {
border-right: 0;
}
}
@media (max-width: 900px) {
.platform-intro-section,
.supply-chain-section,
.audience-section {
padding: 72px 0;
}
.supply-chain-head {
grid-template-columns: 1fr;
gap: 12px;
}
.supply-chain-flow {
grid-template-columns: repeat(3, 1fr);
}
.audience-grid {
grid-template-columns: 1fr;
}
.audience-card {
grid-template-columns: 1fr 0.72fr;
grid-template-rows: 1fr;
min-height: 330px;
}
.audience-card figure {
height: 100%;
}
.news-secondary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.platform-intro-grid {
gap: 38px;
}
.capability-grid {
grid-template-columns: repeat(2, 1fr);
}
.capability-card {
min-height: 178px;
padding: 20px 16px;
}
.capability-icon {
margin-bottom: 20px;
}
.supply-chain-flow {
grid-template-columns: repeat(2, 1fr);
row-gap: 34px;
}
.chain-step strong {
min-height: 0;
}
.chain-step small {
min-height: 48px;
}
.audience-card {
display: flex;
min-height: 0;
flex-direction: column;
}
.audience-card figure {
order: -1;
height: 190px;
}
.technology-rail {
grid-template-columns: repeat(2, 1fr);
}
.technology-rail article:nth-child(2n) {
border-right: 0;
}
.news-secondary-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Command-center Hero — 28/07/2026
========================================================================== */
.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;
}
.portal-hero {
min-height: 650px;
padding-top: 86px;
overflow: visible;
background: #eaf8ff;
}
.portal-hero-image,
.portal-hero-wash {
inset: 76px 0 0;
height: calc(100% - 76px);
}
.portal-hero-image {
object-position: center center;
}
.portal-hero-wash {
background:
linear-gradient(90deg, rgba(250, 254, 255, 0.98) 0%, rgba(248, 253, 255, 0.94) 25%, rgba(248, 253, 255, 0.68) 44%, rgba(248, 253, 255, 0.08) 69%, transparent 100%),
linear-gradient(0deg, rgba(228, 247, 255, 0.62) 0%, transparent 36%);
}
.portal-hero-layout {
min-height: 564px;
padding-top: 54px;
}
.portal-hero-copy {
width: min(590px, 51vw);
max-width: none;
padding: 0 0 82px;
}
.hero-title-main {
max-width: none;
margin-bottom: 18px;
color: var(--portal-ink);
text-transform: none;
}
.hero-brand-title {
display: block;
margin-bottom: 5px;
color: #073e83;
font-size: var(--fs-display);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
}
.hero-title-main .hero-title-highlight {
display: block;
color: #06417f;
background: none;
font-size: var(--fs-h3);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.34;
-webkit-text-fill-color: currentColor;
}
.portal-hero-points {
display: grid;
width: min(590px, 100%);
grid-template-columns: repeat(4, max-content);
gap: 9px 17px;
margin-bottom: 20px;
color: #164b81;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.portal-hero-points span {
display: inline-flex;
gap: 6px;
align-items: center;
white-space: nowrap;
}
.portal-hero-points span i {
display: grid;
width: 16px;
height: 16px;
place-items: center;
color: #fff;
border-radius: 50%;
background: var(--brand);
font-size: 0.75rem;
font-style: normal;
box-shadow: 0 4px 10px rgba(8, 123, 230, 0.2);
}
.hero-command-search {
display: grid;
width: min(520px, 100%);
height: 52px;
grid-template-columns: 22px minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
padding: 5px 5px 5px 17px;
border: 1px solid rgba(8, 123, 230, 0.2);
border-radius: 10px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 13px 35px rgba(13, 91, 153, 0.14);
backdrop-filter: blur(12px);
}
.hero-command-search > svg {
width: 19px;
fill: none;
stroke: #6689a7;
stroke-width: 2;
}
.hero-command-search input {
min-width: 0;
height: 100%;
padding: 0;
color: var(--portal-ink);
border: 0;
outline: 0;
background: transparent;
box-shadow: none;
font-size: 0.875rem;
}
.hero-command-search input::placeholder {
color: #8ea6ba;
}
.hero-command-search button {
display: inline-flex;
height: 42px;
gap: 10px;
align-items: center;
padding: 0 18px;
color: #fff;
border: 0;
border-radius: 8px;
background: linear-gradient(110deg, #087be6, #10aee5);
box-shadow: 0 8px 20px rgba(8, 123, 230, 0.24);
cursor: pointer;
font-size: 0.875rem;
font-weight: 800;
transition: 180ms ease;
}
.hero-command-search button:hover {
box-shadow: 0 11px 25px rgba(8, 123, 230, 0.33);
transform: translateY(-1px);
}
.hero-command-search button b {
display: grid;
width: 20px;
height: 20px;
place-items: center;
border-radius: 5px;
background: rgba(255, 255, 255, 0.18);
font-size: 0.875rem;
}
.portal-hero-actions {
gap: 9px;
margin-top: 15px;
}
.portal-hero-actions .hero-btn-primary,
.portal-hero-actions .hero-btn-secondary {
min-height: 38px;
gap: 12px;
padding: 8px 14px;
border-width: 1px;
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 700;
box-shadow: 0 8px 22px rgba(7, 78, 138, 0.1);
}
.portal-hero-actions .hero-btn-primary {
background: #075fc5;
}
.portal-hero-actions .hero-btn-secondary {
color: #06417f !important;
border-color: rgba(6, 95, 197, 0.24);
background: rgba(255, 255, 255, 0.94);
}
.portal-hero-actions .hero-btn-secondary:hover {
color: #fff !important;
background: #075fc5;
border-color: #075fc5;
}
.hero-constellation-canvas {
z-index: 1;
width: 61%;
opacity: 0.36;
}
.lookup-shell {
position: relative;
z-index: 14;
margin-top: -66px;
padding-bottom: 22px;
background: transparent;
}
.lookup-kpi-strip {
border: 1px solid rgba(8, 123, 230, 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 18px 44px rgba(18, 94, 154, 0.14);
backdrop-filter: blur(15px);
}
.lookup-kpi {
min-height: 102px;
padding-top: 15px;
padding-bottom: 15px;
}
@media (min-width: 1001px) {
.lookup-kpi-strip {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.lookup-kpi:nth-child(-n+3) {
border-bottom: 0;
}
.lookup-kpi:nth-child(3n) {
border-right: 1px solid rgba(31, 120, 183, 0.14);
}
.lookup-kpi:last-child {
border-right: 0;
}
}
@media (max-width: 1000px) {
.portal-hero-copy {
width: min(610px, 62vw);
}
.portal-hero-points {
grid-template-columns: repeat(2, max-content);
}
.hero-brand-title {
font-size: var(--fs-display);
}
}
@media (max-width: 720px) {
.portal-hero {
min-height: 820px;
padding-top: 70px;
overflow: hidden;
}
.portal-hero-image,
.portal-hero-wash {
inset: 70px 0 0;
height: calc(100% - 70px);
}
.portal-hero-image {
object-position: 64% center;
}
.portal-hero-wash {
background:
linear-gradient(180deg, rgba(250, 254, 255, 0.97) 0%, rgba(250, 254, 255, 0.87) 44%, rgba(250, 254, 255, 0.18) 76%, rgba(235, 249, 255, 0.62) 100%);
}
.portal-hero-layout {
min-height: 750px;
padding-top: 34px;
}
.portal-hero-copy {
width: 100%;
padding: 0 0 35px;
}
.hero-brand-title {
font-size: var(--fs-display);
}
.hero-title-main .hero-title-highlight {
max-width: 350px;
font-size: var(--fs-body-lg);
}
.portal-hero-points {
grid-template-columns: repeat(2, max-content);
gap: 9px 13px;
font-size: 0.75rem;
}
.hero-command-search {
height: auto;
grid-template-columns: 20px minmax(0, 1fr);
padding: 11px;
border-radius: 13px;
}
.hero-command-search input {
height: 34px;
}
.hero-command-search button {
grid-column: 1 / -1;
width: 100%;
justify-content: center;
}
.portal-hero-actions {
display: grid;
grid-template-columns: 1fr 1fr;
}
.portal-hero-actions .btn {
width: 100%;
justify-content: center;
}
.portal-hero-actions .hero-btn-primary {
grid-column: 1 / -1;
}
.lookup-shell {
margin-top: -76px;
}
}
/* ==========================================================================
UI refinement batch — browser notes 28/07/2026
========================================================================== */
.portal-hero {
min-height: 560px;
}
.portal-hero-layout {
min-height: 474px;
padding-top: 78px;
}
.portal-hero-copy {
width: min(760px, 69vw);
padding-bottom: 42px;
}
.hero-title-main {
margin: 0 0 26px;
}
.hero-title-main .hero-title-highlight {
max-width: 760px;
color: #073e83;
font-size: var(--fs-display);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
text-wrap: balance;
}
.portal-hero-points {
margin-bottom: 0;
font-size: 0.875rem;
}
.lookup-shell {
margin-top: 0;
padding: 28px 0 24px;
background: linear-gradient(180deg, #eef9ff 0%, #f8fdff 100%);
}
.lookup-command-search {
width: min(940px, 100%);
height: 62px;
margin: 0 auto 18px;
grid-template-columns: 24px minmax(0, 1fr) auto;
padding: 7px 7px 7px 20px;
border-radius: 14px;
box-shadow: 0 16px 42px rgba(13, 91, 153, 0.13);
}
.lookup-command-search button {
height: 48px;
padding-inline: 24px;
}
.lookup-kpi-strip {
margin-top: 0;
}
.lookup-kpi {
min-height: 88px;
align-items: center;
padding-top: 13px;
padding-bottom: 13px;
}
.lookup-kpi-main strong {
font-size: var(--fs-h3);
}
.platform-intro-section {
padding-bottom: 38px;
}
.platform-intro-copy p {
margin-bottom: 0;
}
.portal-overview {
padding-top: 38px;
}
.capability-card {
justify-content: flex-start;
min-height: 190px;
padding: 24px 20px;
}
.capability-icon {
position: relative;
width: 58px;
height: 58px;
margin-bottom: 24px;
border-radius: 17px;
background:
radial-gradient(circle at 30% 22%, #fff 0 23%, transparent 24%),
linear-gradient(145deg, #e9f8ff, #d9efff);
box-shadow: inset 0 0 0 1px rgba(8, 123, 230, 0.08), 0 9px 22px rgba(8, 123, 230, 0.1);
}
.capability-icon::after {
position: absolute;
right: 7px;
bottom: 7px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--portal-cyan);
box-shadow: 0 0 9px var(--portal-cyan);
content: "";
}
.capability-icon svg {
width: 31px;
stroke-width: 1.7;
}
.capability-card strong {
font-size: 1rem;
}
.supply-chain-head h2 {
margin-top: 0;
}
.dashboard-grid-secondary .chart-card {
min-height: 300px;
padding: 28px;
}
.dashboard-grid-secondary .chart-head {
margin-bottom: 22px;
}
.dashboard-grid-secondary .chart-head small {
margin-bottom: 8px;
font-size: 0.875rem;
}
.dashboard-grid-secondary .chart-head strong {
font-size: var(--fs-h2);
}
.dashboard-grid-secondary .donut-wrap {
gap: 34px;
padding-top: 4px;
}
.dashboard-grid-secondary .donut {
width: 154px;
height: 154px;
}
.dashboard-grid-secondary .donut span strong {
font-size: 1.5rem;
}
.dashboard-grid-secondary .donut span small {
font-size: 0.8125rem;
}
.dashboard-grid-secondary .donut-wrap ul {
gap: 12px;
font-size: 0.875rem;
}
.dashboard-grid-secondary .donut-wrap li i,
.dashboard-grid-secondary .alert-legend i {
width: 9px;
height: 9px;
}
.dashboard-grid-secondary .bar-row {
grid-template-columns: 108px 1fr 46px;
gap: 12px;
margin: 7px 0;
padding: 8px 10px;
font-size: 0.875rem;
}
.dashboard-grid-secondary .bar-row i {
height: 9px;
}
.dashboard-grid-secondary .quality-card .bar-row {
grid-template-columns: max-content 1fr 42px;
}
.dashboard-grid-secondary .quality-card .bar-row span {
font-size: 0.875rem;
}
.dashboard-grid-secondary .alert-card {
grid-template-columns: 132px 1fr;
gap: 22px;
}
.dashboard-grid-secondary .alert-orbit {
width: 124px;
height: 124px;
}
.dashboard-grid-secondary .alert-orbit::before {
width: 76px;
height: 76px;
}
.dashboard-grid-secondary .alert-orbit span {
font-size: 1.25rem;
}
.dashboard-grid-secondary .alert-legend {
gap: 13px;
}
.dashboard-grid-secondary .alert-legend span {
gap: 9px;
font-size: 0.875rem;
}
.audience-card {
min-height: 365px;
grid-template-rows: 1fr 190px;
}
.audience-copy {
display: flex;
padding: 30px 30px 24px;
flex-direction: column;
}
.audience-copy > span {
display: block;
margin-bottom: 22px;
font-size: var(--fs-body-lg);
letter-spacing: 0.09em;
line-height: 1.25;
}
.audience-copy ul {
margin-bottom: 22px;
}
.audience-copy a {
margin-top: auto;
}
.technology-section {
padding: 38px 0 42px;
}
.technology-rail {
overflow: hidden;
grid-template-columns: repeat(4, minmax(0, 1fr));
border: 1px solid rgba(8, 123, 230, 0.11);
border-radius: 18px;
background: rgba(255, 255, 255, 0.78);
}
.technology-rail article,
.technology-rail article:first-child {
min-height: 92px;
gap: 14px;
align-items: center;
padding: 17px 18px;
border-right: 1px solid rgba(8, 123, 230, 0.1);
border-bottom: 1px solid rgba(8, 123, 230, 0.1);
}
.technology-rail article:nth-child(4n) {
border-right: 0;
}
.technology-rail article:nth-child(n+5) {
border-bottom: 0;
}
.technology-rail i {
width: 46px;
height: 46px;
flex-basis: 46px;
border: 1px solid rgba(8, 123, 230, 0.12);
border-radius: 14px;
background: linear-gradient(145deg, #e7f7ff, #d8edff);
}
.technology-rail i svg {
width: 25px;
height: 25px;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.technology-rail strong {
margin-bottom: 5px;
font-size: 0.875rem;
}
.technology-rail small {
font-size: 0.75rem;
line-height: 1.45;
}
.news-secondary-grid {
display: grid;
overflow: visible;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 12px;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.news-secondary-grid .news-card {
overflow: hidden;
border: 1px solid rgba(18, 105, 166, 0.12);
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 12px 32px rgba(24, 93, 143, 0.08);
}
.news-secondary-grid .news-card:last-child {
border-bottom: 1px solid rgba(18, 105, 166, 0.12);
}
.news-secondary-grid .news-card > a {
display: flex;
height: 100%;
gap: 0;
align-items: stretch;
padding: 0;
flex-direction: column;
}
.news-secondary-grid .news-card figure {
height: 116px;
border-radius: 0;
}
.news-secondary-grid .news-card:hover figure img {
transform: scale(1.045);
}
.news-secondary-grid .news-copy {
display: flex;
min-height: 100px;
padding: 14px 14px 16px;
flex-direction: column;
justify-content: flex-start;
}
.news-secondary-grid .news-copy small {
font-size: 0.75rem;
}
.news-secondary-grid .news-copy h3 {
margin-top: 7px;
font-size: var(--fs-h4);
line-height: 1.38;
-webkit-line-clamp: 3;
}
.portal-cta-inner {
grid-template-columns: 1.28fr 0.72fr;
}
.portal-cta-inner h2 {
font-size: var(--fs-h2);
line-height: 1.28;
text-wrap: balance;
}
.portal-cta-inner p {
font-size: 1rem;
line-height: 1.65;
}
@media (max-width: 1000px) {
.portal-hero-copy {
width: min(700px, 72vw);
}
.hero-title-main .hero-title-highlight {
font-size: var(--fs-display);
}
.dashboard-grid-secondary .chart-card {
min-height: 290px;
}
}
@media (max-width: 900px) {
.news-secondary-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
}
.portal-cta-inner {
grid-template-columns: 1fr;
}
}
@media (max-width: 720px) {
.portal-hero {
min-height: 620px;
}
.portal-hero-layout {
min-height: 550px;
padding-top: 48px;
}
.portal-hero-copy {
width: 100%;
padding-bottom: 24px;
}
.hero-title-main .hero-title-highlight {
max-width: 360px;
font-size: var(--fs-h2);
line-height: 1.25;
}
.lookup-shell {
margin-top: 0;
padding-top: 20px;
}
.lookup-command-search {
height: auto;
margin-bottom: 14px;
}
.dashboard-grid-secondary .chart-card {
min-height: 0;
padding: 22px 18px;
}
.dashboard-grid-secondary .bar-row {
grid-template-columns: 92px 1fr 40px;
font-size: 0.8125rem;
}
.dashboard-grid-secondary .quality-card .bar-row {
grid-template-columns: 1fr 40px;
}
.dashboard-grid-secondary .quality-card .bar-row span {
grid-column: 1 / -1;
}
.technology-rail {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.technology-rail article:nth-child(2n) {
border-right: 0;
}
.technology-rail article:nth-child(n+5) {
border-bottom: 1px solid rgba(8, 123, 230, 0.1);
}
.technology-rail article:nth-child(n+7) {
border-bottom: 0;
}
.news-secondary-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 480px) {
.news-secondary-grid {
grid-template-columns: 1fr;
grid-template-rows: none;
}
}
/* ==========================================================================
Landmark hero, continuous supply chain and centered section system
========================================================================== */
.portal-hero {
overflow: clip;
min-height: 580px;
contain: paint;
}
.portal-hero-image {
right: 0;
left: 0;
max-width: 100%;
object-fit: cover;
object-position: center right;
}
.portal-hero-wash {
background:
linear-gradient(90deg, rgba(248, 253, 255, 0.96) 0%, rgba(248, 253, 255, 0.88) 24%, rgba(248, 253, 255, 0.5) 36%, rgba(248, 253, 255, 0.1) 48%, transparent 58%),
linear-gradient(0deg, rgba(227, 247, 255, 0.24), transparent 22%);
}
.portal-hero-layout {
min-height: 494px;
padding-top: 92px;
}
.portal-hero-copy {
width: min(650px, 58vw);
max-width: 650px;
padding-bottom: 34px;
}
.hero-title-main .hero-title-highlight {
display: block;
max-width: 650px;
color: transparent;
background: linear-gradient(104deg, #073e83 0%, #074c99 48%, #087be6 76%, #19b9dc 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size: var(--fs-display);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.25;
text-wrap: balance;
}
.portal-hero-points {
display: grid;
width: min(540px, 100%);
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 11px 18px;
align-items: stretch;
font-size: 0.875rem;
}
.portal-hero-points span {
display: flex;
min-height: 34px;
gap: 9px;
align-items: center;
padding: 8px 10px;
color: #174f82;
border: 1px solid rgba(8, 123, 230, 0.11);
border-radius: 9px;
background: rgba(255, 255, 255, 0.66);
backdrop-filter: blur(8px);
}
.lookup-command-search button b {
display: grid;
width: 32px;
height: 32px;
place-items: center;
border-radius: 9px;
background: rgba(255, 255, 255, 0.16);
}
.lookup-command-search button b svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.lookup-kpi-icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
color: #087be6;
border: 0;
background:
radial-gradient(circle at 30% 25%, #fff, transparent 40%),
linear-gradient(145deg, rgba(8, 123, 230, 0.13), rgba(31, 202, 230, 0.08));
box-shadow: inset 0 0 0 1px rgba(8, 123, 230, 0.1);
}
.lookup-kpi-icon svg {
width: 26px;
height: 26px;
stroke-width: 1.75;
}
.platform-intro-grid {
grid-template-columns: 1fr;
gap: 42px;
}
.platform-intro-copy {
width: min(920px, 100%);
margin-inline: auto;
text-align: center;
}
.platform-intro-copy h2 {
max-width: 900px;
margin-inline: auto;
}
.platform-intro-copy p {
max-width: 840px;
margin-inline: auto;
font-size: 1.125rem;
line-height: 1.75;
}
.capability-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.capability-card {
min-height: 188px;
}
.portal-overview .portal-section-head,
.supply-chain-head,
.audience-head,
.news-head,
.compact-head {
display: block;
text-align: center;
}
.portal-overview .portal-section-head > div,
.audience-head > div,
.news-head > div,
.compact-head > div {
width: min(980px, 100%);
margin-inline: auto;
}
.compact-head h2,
.compact-head p {
max-width: 880px;
margin-right: auto;
margin-left: auto;
}
.compact-head p {
margin-top: 18px;
}
.partners-section .eyebrow {
justify-content: center;
}
.city-command-grid {
grid-template-columns: 1.18fr 0.82fr;
}
.overview-donut-card {
display: flex;
flex-direction: column;
}
.overview-donut-body {
position: relative;
display: flex;
min-height: 470px;
flex: 1;
flex-direction: column;
justify-content: center;
padding: 36px 30px;
background:
radial-gradient(circle at 50% 50%, rgba(22, 184, 226, 0.1), transparent 34%),
linear-gradient(145deg, #f9fdff, #eef8ff);
}
.overview-donut-body::before {
position: absolute;
inset: 24px;
border: 1px solid rgba(8, 123, 230, 0.07);
border-radius: 50%;
content: "";
transform: scale(0.8);
}
.overview-total {
position: relative;
z-index: 1;
display: block;
margin-bottom: 30px;
color: #06498d;
font-size: var(--fs-h2);
letter-spacing: -0.05em;
text-align: center;
}
.overview-total small {
display: block;
margin-top: 5px;
color: #6e8ba5;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.overview-donut-body .donut-wrap {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
gap: 26px;
align-items: center;
}
.overview-donut-body .donut {
width: 180px;
height: 180px;
}
.overview-donut-body .donut-wrap ul {
display: grid;
gap: 15px;
margin: 0;
padding: 0;
list-style: none;
}
.overview-donut-body .donut-wrap li {
display: grid;
grid-template-columns: 10px 1fr auto;
gap: 9px;
align-items: center;
color: #567693;
font-size: 0.875rem;
}
.overview-donut-body .donut-wrap li i {
width: 9px;
height: 9px;
border-radius: 50%;
}
.overview-donut-body .donut-wrap li b {
color: #06498d;
}
.supply-chain-head {
grid-template-columns: 1fr;
gap: 8px;
align-items: center;
margin-bottom: 44px;
}
.supply-chain-head h2 {
margin-bottom: 8px;
}
.supply-chain-head p {
max-width: 720px;
margin: 0 auto;
font-size: 1rem;
}
.supply-chain-flow {
overflow: visible;
grid-template-columns: repeat(9, minmax(0, 1fr));
}
.supply-chain-flow::before {
top: 15px;
right: 3%;
left: 3%;
height: 3px;
border-radius: 99px;
box-shadow: 0 0 16px rgba(8, 123, 230, 0.2);
}
.supply-chain-flow::after {
position: absolute;
z-index: 2;
top: 9px;
left: 3%;
width: 14px;
height: 14px;
border: 3px solid #fff;
border-radius: 50%;
background: #15c5e7;
box-shadow: 0 0 16px #15c5e7;
content: "";
animation: chain-data-flow 6s ease-in-out infinite;
}
@keyframes chain-data-flow {
0% { left: 3%; opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { left: calc(97% - 14px); opacity: 0; }
}
.chain-step {
padding-inline: 5px;
}
.chain-photo {
margin-bottom: 14px;
border-radius: 13px 13px 13px 5px;
}
.chain-step strong {
min-height: 48px;
font-size: var(--fs-caption);
font-weight: 800;
}
.chain-step small {
margin-top: 6px;
font-size: var(--fs-caption);
}
.dashboard-grid-secondary {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.technology-rail {
overflow: visible;
gap: 12px 22px;
border: 0;
border-radius: 0;
background: transparent;
}
.technology-rail article,
.technology-rail article:first-child,
.technology-rail article:nth-child(n+5) {
min-height: 82px;
padding: 14px 6px;
border: 0;
border-bottom: 1px solid rgba(8, 123, 230, 0.09);
background: transparent;
}
.technology-rail i {
width: 42px;
height: 42px;
flex-basis: 42px;
color: #0786dc;
border: 0;
border-radius: 0;
background: transparent;
filter: drop-shadow(0 7px 10px rgba(8, 123, 230, 0.17));
}
.technology-rail i svg {
width: 31px;
height: 31px;
stroke-width: 1.55;
}
.technology-rail article:hover i {
color: #11bcd9;
transform: translateY(-2px) scale(1.06);
}
.technology-rail article:hover strong {
color: #087be6;
}
.portal-cta-inner {
grid-template-columns: 1.16fr 0.84fr;
}
.portal-cta-inner > div:last-child {
display: grid;
grid-template-columns: 118px minmax(0, 1fr);
gap: 12px 24px;
align-items: center;
}
.portal-cta-inner > div:last-child p,
.portal-cta-inner > div:last-child .btn {
grid-column: 2;
}
.portal-cta-inner > div:last-child .btn {
justify-self: start;
padding-inline: 20px;
white-space: nowrap;
}
.cta-symbol {
grid-row: 1 / span 2;
width: 118px;
height: 118px;
}
.cta-symbol svg {
width: 100%;
height: 100%;
overflow: visible;
}
.cta-ring,
.cta-link,
.cta-shield,
.cta-check {
fill: none;
stroke: rgba(159, 237, 255, 0.74);
stroke-linecap: round;
stroke-linejoin: round;
}
.cta-ring {
stroke-width: 1;
stroke-dasharray: 5 7;
transform-origin: center;
animation: cta-ring-spin 18s linear infinite;
}
.cta-ring.ring-b {
animation-direction: reverse;
animation-duration: 12s;
}
.cta-link { stroke-width: 1.5; }
.cta-shield { fill: rgba(255, 255, 255, 0.08); stroke-width: 2; }
.cta-check { stroke: #fff; stroke-width: 3; }
.cta-node { fill: #fff; filter: drop-shadow(0 0 8px #54dfff); }
@keyframes cta-ring-spin {
to { transform: rotate(360deg); }
}
@media (max-width: 1000px) {
.portal-hero-copy {
width: min(580px, 61vw);
}
.hero-title-main .hero-title-highlight {
font-size: var(--fs-h2);
}
.chain-step {
padding-inline: 3px;
}
.chain-photo {
border-radius: 10px 10px 10px 4px;
}
.chain-step small {
line-height: 1.35;
}
}
@media (max-width: 900px) {
.city-command-grid {
grid-template-columns: 1.08fr 0.92fr;
}
.overview-donut-body .donut-wrap {
grid-template-columns: 130px minmax(0, 1fr);
}
.overview-donut-body .donut {
width: 130px;
height: 130px;
}
.supply-chain-flow {
overflow-x: auto;
grid-template-columns: repeat(9, 118px);
padding-bottom: 14px;
scrollbar-width: thin;
}
.supply-chain-flow::before {
right: auto;
width: 1035px;
}
.dashboard-grid-secondary {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portal-cta-inner {
grid-template-columns: 1fr;
gap: 30px;
}
.portal-cta-inner > div:last-child {
grid-template-columns: 96px minmax(0, 1fr);
}
.cta-symbol {
width: 96px;
height: 96px;
}
}
@media (max-width: 720px) {
.portal-hero {
min-height: 650px;
}
.portal-hero-image {
object-position: 68% center;
}
.portal-hero-layout {
min-height: 580px;
padding-top: 56px;
}
.portal-hero-copy {
width: 100%;
max-width: 100%;
}
.hero-title-main .hero-title-highlight {
max-width: 355px;
font-size: var(--fs-h2);
}
.portal-hero-points {
width: min(360px, 100%);
gap: 8px;
font-size: 0.75rem;
}
.city-command-grid,
.dashboard-grid-secondary {
grid-template-columns: 1fr;
}
.overview-donut-body {
min-height: 390px;
}
.capability-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.portal-cta-inner > div:last-child {
grid-template-columns: 76px minmax(0, 1fr);
}
.portal-cta-inner > div:last-child p,
.portal-cta-inner > div:last-child .btn {
grid-column: 2;
}
.cta-symbol {
width: 76px;
height: 76px;
}
}
@media (max-width: 480px) {
.portal-hero-points {
grid-template-columns: 1fr;
}
.overview-donut-body .donut-wrap {
grid-template-columns: 1fr;
justify-items: center;
}
.overview-donut-body .donut-wrap ul {
width: min(250px, 100%);
}
.portal-cta-inner > div:last-child {
grid-template-columns: 1fr;
text-align: center;
}
.portal-cta-inner > div:last-child p,
.portal-cta-inner > div:last-child .btn {
grid-column: 1;
}
.cta-symbol {
grid-row: auto;
margin-inline: auto;
}
}
/* ========================================================================== */
/* ACCESSIBILITY BASELINE */
/* Appended last so it wins over the older generations of component CSS above. */
/* ========================================================================== */
/* Several components reset `outline: none` on inputs and links without ever
supplying a replacement, which left keyboard users with no visible focus on
the primary nav and the trace-lookup field. One global rule covers every
focusable thing; components may restyle it but must not remove it. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--brand);
outline-offset: 3px;
border-radius: 4px;
}
/* On the saturated blue CTA and hero panels a blue ring disappears, so invert. */
.portal-cta a:focus-visible,
.portal-cta button:focus-visible,
.site-footer a:focus-visible {
outline-color: #fff;
}
/* The lookup field sits inside a bordered pill; ring the pill, not the bare
input, so the indicator traces the control the user actually sees. */
.hero-command-search:focus-within {
outline: 3px solid var(--brand);
outline-offset: 3px;
}
.hero-command-search input:focus-visible {
outline: none;
}
/* --- Touch targets ------------------------------------------------------- */
/* iOS Safari zooms the whole page when a focused input is under 16px, which
knocks the layout sideways on the single most important control on the page. */
.hero-command-search,
.lookup-command-search {
height: auto;
min-height: 56px;
}
.hero-command-search input,
.lookup-panel input,
.field input,
.field select,
.field textarea {
min-height: 44px;
font-size: 1rem;
}
.hero-command-search button {
min-height: 46px;
}
/* Inline text links that act as primary CTAs need a real hit area. */
.audience-copy a,
.portal-card a[href],
.news-copy a[href] {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.mobile-toggle {
min-width: 44px;
min-height: 44px;
}
/* Tap area comes from height only — inline padding here pushed the 7-item nav
past the viewport at 1280px. */
.lang-option {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* The hero headline is a 98-character sentence, not a 3-word display line, so
it gets its own step below --fs-display; at 4.5vw it wrapped to five lines
and pushed the lookup panel off the first screen. */
.hero-title-main,
.hero-title-main .hero-title-highlight {
font-size: clamp(1.75rem, 3.4vw, 3rem);
/* Set in caps, and Vietnamese caps carry marks on both sides — Ố and Ỗ reach
1.16em above the baseline while Ộ drops a dot 0.24em below it. Measured on
this exact string the two lines need 1.40em; 1.45 leaves a little air. */
line-height: 1.45;
}
/* Leaflet ships its own 8px attribution type; bring it up to the floor. */
.leaflet-control-attribution,
.leaflet-control-attribution a {
font-size: var(--fs-caption) !important;
}
.leaflet-control-layers-selector {
width: 18px;
height: 18px;
}
/* --- Contrast ------------------------------------------------------------ */
/* The three audience accents and several muted greys sat between 2.1:1 and
4.2:1 on their own backgrounds. Same hues, darkened until they clear 4.5:1
for normal-size text; ratios measured against the real rendered background
(#f8fcff cards, #2d78cd mid-gradient on the CTA). Decorative dots and rules
keep the brighter original tint — only text moves. */
:root {
--accent-blue-text: #0a6ac4; /* was #087be6 — 4.08:1 → 5.26:1 */
--accent-green-text: #0a7351; /* was #12a978 — 2.92:1 → 5.68:1 */
--accent-amber-text: #a35c00; /* was #ef9e29 — 2.12:1 → 4.98:1 */
--accent-teal-text: #0a7a6d; /* was #12beaa — 2.27:1 → 5.07:1 */
--text-muted-aa: #4d6a86; /* was #66869f / #7292aa → 5.47:1 */
}
.audience-government { --card-accent-text: var(--accent-blue-text); }
.audience-business { --card-accent-text: var(--accent-green-text); }
.audience-citizen { --card-accent-text: var(--accent-amber-text); }
.audience-card .audience-kicker,
.audience-card .audience-copy a,
.audience-card .audience-copy a b {
color: var(--card-accent-text, var(--accent-blue-text));
}
.lookup-kpi-main .realtime-value {
color: var(--accent-teal-text);
}
.technology-title,
.portal-kicker,
.card-kicker,
.eyebrow {
color: var(--accent-blue-text);
}
.nav-link {
color: var(--accent-blue-text);
}
.integration-protocols span,
.orbit-card small,
.supply-step small,
.technology-item small,
.chart-axis .axis-label,
.dashboard-stat span,
.portal-card small {
color: var(--text-muted-aa);
}
/* White on the CTA gradient measures 4.53:1 at the mid-tone but drops below
AA over the lighter top-right radial, so the light stop is pulled down too. */
.portal-cta-inner p {
color: #fff;
}
.portal-cta-inner {
--cta-wash-opacity: 0.18;
}
/* ========================================================================== */
/* LAYOUT CORRECTIONS */
/* ========================================================================== */
/* --- Supply chain: nine columns cannot hold readable text ---------------- */
/* At 1280px each of the nine columns was ~120px, which is why the labels had
been pushed down to 9px and the descriptions to 8px. With type back at the
12px floor the row needs real width, so it scrolls horizontally below 1400px
instead of compressing. */
@media (min-width: 1401px) {
.supply-chain-flow { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}
@media (max-width: 1400px) {
.supply-chain-flow {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(168px, 1fr);
grid-template-columns: none;
overflow-x: auto;
scroll-snap-type: inline proximity;
padding-bottom: 12px;
/* the connector rail is absolutely positioned against this box */
overscroll-behavior-inline: contain;
}
.supply-chain-flow > * { scroll-snap-align: start; }
}
@media (max-width: 720px) {
.supply-chain-flow { grid-auto-columns: minmax(152px, 78vw); }
}
/* Titles of differing length used to shove each column's description to a
different baseline. Give the label block a common floor. */
.supply-step strong,
.supply-chain-flow article strong {
display: block;
min-height: calc(2 * 1.35em);
}
/* --- Horizontal scrollers need an edge affordance ------------------------ */
/* The KPI strip clipped its second card mid-word with nothing to indicate more
content existed. A mask fades the trailing edge and retracts once the user
has scrolled to the end. */
.lookup-kpi-strip,
.supply-chain-flow {
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
@media (max-width: 1000px) {
.lookup-kpi-strip {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.lookup-kpi-strip.is-scroll-end {
-webkit-mask-image: none;
mask-image: none;
}
}
/* --- Card grids: align content baselines --------------------------------- */
/* Cards stretch to equal height but their contents were top-aligned, so a
one-line title and a two-line title pushed the body copy out of alignment
across a row. A subgrid lets title and body share rows. */
/* Each card spans the parent's rows and inherits them via subgrid, so the icon,
title and body of every card in a band share row lines. Without this a
one-line title and a two-line title push their descriptions to different
baselines across the row. */
@supports (grid-template-rows: subgrid) {
.capability-grid,
.technology-rail {
align-items: stretch;
}
.capability-card {
display: grid;
grid-row: span 3;
grid-template-rows: subgrid;
align-content: start;
}
.technology-rail article > div {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
}
.news-secondary-grid .news-copy {
display: grid;
grid-row: span 2;
grid-template-rows: subgrid;
align-content: start;
}
}
/* --- Vertical rhythm ------------------------------------------------------ */
/* Section padding ranged over 36–100px with no shared step. Everything now
derives from two tokens; sections that sit directly on a neighbouring block
of the same background drop the doubled gap. */
.portal-section,
.technology-section,
.portal-cta {
padding-top: var(--space-section);
padding-bottom: var(--space-section);
}
.platform-intro-section,
.audience-section {
padding-top: var(--space-section-lg);
padding-bottom: var(--space-section-lg);
}
.lookup-shell {
padding-top: calc(var(--space-section) / 2);
padding-bottom: calc(var(--space-section) / 2);
}
/* --- Measure -------------------------------------------------------------- */
/* Intro and partner paragraphs ran to 84–86 characters per line; the CTA
paragraph was squeezed to 35. Both ends now sit inside a readable band. */
.platform-intro-copy p,
.supply-chain-head p,
.partners-head p,
.portal-section-head p,
.audience-head p {
max-width: var(--measure);
margin-inline: auto;
}
.hanoi-identity-copy p,
.news-featured .news-copy p {
max-width: var(--measure-narrow);
}
.portal-cta-inner p {
max-width: 42ch;
}
/* --- Headline wrapping ---------------------------------------------------- */
/* `text-wrap: balance` was splitting "Cùng một nền tảng. Ba / góc nhìn hành
động." — it broke the second sentence after its first word. The coloured
span is the second sentence, so make it own its line. */
.audience-head h2 span,
.portal-section-head h2 span,
.hanoi-identity-copy h2 span,
.compact-head h2 span {
display: block;
}
/* Balance is right for short display lines but fights long Vietnamese
sentences; `pretty` only guards the last line, which is what these need. */
.platform-intro-copy h2,
.hero-title-main {
text-wrap: pretty;
}
/* --- Hero ----------------------------------------------------------------- */
/* Desktop: the copy block sat at the top of a 580px hero leaving ~180px of
empty photo underneath. Centre it against the image instead. */
@media (min-width: 901px) {
.portal-hero-layout {
display: flex;
align-items: center;
min-height: 460px;
}
}
/* Mobile: the headline ran straight over the flag and the tower, where dark
blue on a bright sky is unreadable. Give the copy its own legibility wash
and push the photo below it. */
@media (max-width: 900px) {
.portal-hero {
display: flex;
flex-direction: column;
}
.portal-hero-image {
position: relative;
order: 2;
width: 100%;
height: auto;
max-height: 260px;
object-fit: cover;
object-position: 50% 42%;
}
.portal-hero-layout {
position: relative;
z-index: 2;
order: 1;
padding-block: 28px 24px;
}
.portal-hero-wash {
inset: 0 0 auto;
height: 100%;
background: linear-gradient(180deg, #f4faff 0%, #f4faff 82%, rgba(244, 250, 255, 0) 100%);
}
/* The pills fade to transparent at their right edge, which reads as a
clipping bug once they are full-width. Give them a solid card instead. */
.portal-hero-points {
display: grid;
width: 100%;
grid-template-columns: 1fr;
gap: 8px;
}
.portal-hero-points span {
justify-content: flex-start;
padding: 10px 14px;
border: 1px solid rgba(8, 123, 230, 0.16);
border-radius: 10px;
background: #fff;
box-shadow: 0 4px 14px rgba(13, 91, 153, 0.07);
white-space: normal;
}
}
@media (max-width: 560px) {
.portal-hero-points { grid-template-columns: 1fr; }
}
/* The three dashboard cards stretch to a common height, but the shortest one
centred its contents, dropping its header 31px below its neighbours'. Anchor
every card's header to the top so the row reads as one band. */
.dashboard-grid-secondary > .chart-card {
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.dashboard-grid-secondary > .chart-card > .chart-head {
flex: 0 0 auto;
}
/* Let the shortest card absorb its slack at the bottom instead. */
.dashboard-grid-secondary > .chart-card > :last-child {
margin-bottom: auto;
}
/* News card headlines are clamped to three lines. That was set when the type
was 12px; at a readable 18px the longer Vietnamese headlines need a fourth
line, and cutting a headline mid-phrase costs more than an extra row does. */
.news-secondary-grid .news-copy h3 {
-webkit-line-clamp: 4;
line-clamp: 4;
}
/* --- Mobile header -------------------------------------------------------- */
/* The brand tagline was set at 7.7px; at the 12px floor it widens the lockup
enough to push the hamburger off a 390px screen. It is decorative next to
the wordmark, so it steps aside on small screens. */
@media (max-width: 640px) {
.brand-sub { display: none; }
.brand-name,
.brand-hanoi,
.brand-trace {
font-size: var(--fs-body-lg);
}
.nav-wrap {
gap: 8px;
}
}
/* With the photo moved below the copy, the desktop min-heights left ~230px of
empty background between the pills and the image. Let the stack size itself. */
@media (max-width: 900px) {
.portal-hero {
min-height: 0;
padding-top: 76px;
padding-bottom: 0;
}
.portal-hero-layout {
min-height: 0;
}
.portal-hero-copy {
padding-bottom: 4px;
}
}
/* Footer link columns were 27px tall — under the 44px touch minimum. */
.site-footer .footer-col a,
.footer-main a {
display: flex;
align-items: center;
min-height: 44px;
}
/* --- Remaining contrast items -------------------------------------------- */
/* White ✓ on the brand blue measured 4.21:1 at 12px; a shade darker clears AA
without changing the mark's read. */
.portal-hero-points span i {
background: #0875db;
}
/* Numerals in the identity list were brand blue on a pale blue chip (3.86:1). */
.hanoi-identity-copy i,
.identity-list i {
color: var(--accent-blue-text);
}
/* Decorative, but it is real text in the accessibility tree. */
.lang-divider {
color: #5c7086;
}
/* The image caption is white with no scrim of its own — it was legible only
because this particular photo happens to be dark behind it. */
.hanoi-photo figcaption,
.hanoi-identity-media figcaption,
.portal-media figcaption {
padding: 8px 14px;
border-radius: 8px;
background: rgba(4, 26, 48, 0.72);
backdrop-filter: blur(4px);
}
/* Nav links are 40px tall and stay visible down to 900px, which includes
touch tablets. */
.nav-link,
.nav-trigger {
min-height: 44px;
}
/* The hero pills are 66% white over the photo, so the two on the right — which
sit over the bright sky — read as faded and their text loses contrast against
a backdrop that varies per pill. Make the card opaque so all four match. */
.portal-hero-points span {
border: 1px solid rgba(8, 123, 230, 0.14);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 4px 14px rgba(13, 91, 153, 0.08);
}
/* ==========================================================================
Hero capability labels + KPI reference strip — 29/07/2026
========================================================================== */
.portal-hero-points span,
.portal-hero-points span:hover {
min-height: 28px;
padding: 2px 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.portal-hero-points span i {
width: 20px;
height: 20px;
flex: 0 0 20px;
box-shadow: 0 0 0 4px rgba(8, 117, 219, 0.08);
}
.lookup-kpi-strip,
.lookup-kpi-strip.is-scroll-end {
display: grid;
overflow: hidden;
grid-template-columns: repeat(6, minmax(0, 1fr));
margin-top: 18px;
padding: 10px 0;
border: 1px solid rgba(17, 91, 153, 0.11);
border-radius: 18px;
background: rgba(255, 255, 255, 0.98);
box-shadow:
0 18px 46px rgba(14, 76, 130, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.95);
-webkit-mask-image: none;
mask-image: none;
}
.lookup-kpi,
.lookup-kpi:hover {
display: grid;
min-height: 94px;
grid-template-columns: 48px minmax(0, 1fr);
gap: 13px;
align-items: center;
padding: 13px 17px;
overflow: visible;
border: 0;
border-right: 1px solid rgba(18, 92, 153, 0.11);
background: transparent;
transform: none;
}
.lookup-kpi:last-child {
border-right: 0;
}
.lookup-kpi-icon,
.lookup-kpi-icon.business,
.lookup-kpi-icon.storefront,
.lookup-kpi-icon.district,
.lookup-kpi-icon.food-network,
.lookup-kpi-icon.agency-hub,
.lookup-kpi-icon.realtime {
display: grid;
width: 48px;
height: 54px;
flex: 0 0 48px;
place-items: center;
color: #2a72cc;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.lookup-kpi-icon.realtime {
color: #248ebc;
}
.lookup-kpi-icon svg {
width: 42px;
height: 42px;
fill: none;
stroke: currentColor;
stroke-width: 1.65;
filter: drop-shadow(0 5px 8px rgba(39, 111, 193, 0.13));
}
.lookup-kpi-main {
display: grid;
min-width: 0;
grid-template-rows: auto auto auto;
gap: 2px;
align-content: center;
}
.lookup-kpi-main strong,
.lookup-kpi-main .realtime-value {
grid-row: 1;
overflow: visible;
color: #103f85;
font-size: clamp(1.18rem, 1.58vw, 1.48rem);
font-weight: 800;
letter-spacing: -0.035em;
line-height: 1.05;
text-overflow: clip;
}
.lookup-kpi-main .realtime-value {
color: #119874;
}
.lookup-kpi-main small {
grid-row: 2;
overflow: visible;
color: #163d70;
font-size: 0.7rem;
font-weight: 750;
letter-spacing: -0.01em;
line-height: 1.25;
text-overflow: clip;
text-transform: none;
white-space: normal;
}
.lookup-kpi-main em {
grid-row: 3;
min-height: 2.45em;
overflow: visible;
color: #8093a8;
font-size: 0.58rem;
font-style: normal;
font-weight: 500;
line-height: 1.22;
text-overflow: clip;
white-space: normal;
}
@media (max-width: 1000px) {
.lookup-kpi-strip,
.lookup-kpi-strip.is-scroll-end {
overflow-x: auto;
grid-template-columns: repeat(6, 190px);
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 34px), transparent);
}
.lookup-kpi-strip.is-scroll-end {
-webkit-mask-image: none;
mask-image: none;
}
.portal-hero-points {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.portal-hero-points {
grid-template-columns: 1fr;
}
}
/* The generated mobile artwork is a dedicated 9:16 composition. Keep the
complete vertical landmark stack visible instead of cropping it into the
old 260px landscape slot. */
@media (max-width: 720px) {
.portal-hero-image {
width: 100%;
height: auto;
max-height: none;
aspect-ratio: 941 / 1672;
object-fit: cover;
object-position: center;
}
}
/* ==========================================================================
Responsive section polish + contextual vector art — 29/07/2026
========================================================================== */
/* Shared centered section labels */
.platform-intro-copy .portal-kicker,
.audience-head .portal-kicker,
.news-head .portal-kicker {
display: flex;
width: max-content;
max-width: 100%;
justify-content: center;
margin-inline: auto;
text-align: center;
}
.platform-intro-copy p {
max-width: 76ch;
font-size: clamp(0.86rem, 1.1vw, 0.98rem);
line-height: 1.68;
}
/* Content-specific vector watermarks. The artwork is cloned from each card's
own symbol by script.js, so it remains semantically and visually relevant. */
.capability-card,
.technology-rail article {
isolation: isolate;
overflow: hidden;
}
.capability-card > :not(.card-watermark),
.technology-rail article > :not(.card-watermark) {
position: relative;
z-index: 2;
}
.card-watermark {
position: absolute;
z-index: 0;
right: -18px;
bottom: -24px;
width: 142px;
height: 142px;
fill: none;
color: #0786df;
opacity: 0.075;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.15;
filter: blur(0.35px);
pointer-events: none;
transform: rotate(-7deg);
}
.capability-card {
border: 1px solid rgba(8, 123, 230, 0.13);
background:
radial-gradient(circle at 92% 84%, rgba(20, 193, 230, 0.12), transparent 42%),
linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(237, 248, 255, 0.88));
box-shadow: 0 14px 35px rgba(17, 88, 148, 0.07);
}
.capability-card:nth-child(2n) .card-watermark {
color: #11bcd9;
transform: rotate(6deg);
}
.capability-card:hover .card-watermark,
.technology-rail article:hover .card-watermark {
opacity: 0.13;
transform: rotate(0) scale(1.05);
}
/* Dashboard overview title: single, centered gradient line */
.portal-overview .portal-section-head h2 {
display: block;
width: max-content;
max-width: 100%;
margin-inline: auto;
color: transparent;
background: linear-gradient(100deg, #083f89 5%, #087be6 52%, #15bddf 96%);
-webkit-background-clip: text;
background-clip: text;
font-size: clamp(2rem, 4.1vw, 4.15rem);
letter-spacing: -0.055em;
line-height: 1;
text-align: center;
white-space: nowrap;
}
.portal-overview .portal-section-head h2 span {
display: inline;
color: inherit;
}
/* Nine-link chain: one continuous rail on wide screens, responsive matrix
below it. No horizontal scrolling or clipped cards at any breakpoint. */
.supply-chain-flow {
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-columns: repeat(9, minmax(0, 1fr));
overflow: visible;
padding-bottom: 0;
mask-image: none;
-webkit-mask-image: none;
scrollbar-width: none;
}
.supply-chain-flow::-webkit-scrollbar {
display: none;
}
@media (max-width: 900px) {
.supply-chain-flow {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 34px 10px;
padding-bottom: 0;
overflow: visible;
mask-image: none;
-webkit-mask-image: none;
}
.supply-chain-flow::before,
.supply-chain-flow::after {
display: none;
}
.chain-step {
min-width: 0;
padding-inline: 3px;
}
.chain-photo {
aspect-ratio: 1.42;
}
}
@media (max-width: 560px) {
.supply-chain-flow {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 30px 8px;
}
.chain-step strong {
min-height: 2.7em;
font-size: 0.72rem;
}
.chain-step small {
font-size: 0.68rem;
}
}
@media (max-width: 360px) {
.supply-chain-flow {
grid-template-columns: 1fr;
}
}
/* Center the dashboard and audience headings as complete compositions. */
.dashboard-section .light-head,
.audience-head {
text-align: center;
}
.dashboard-section .light-head > div,
.audience-head > div {
width: min(980px, 100%);
margin-inline: auto;
}
.dashboard-section .light-head .portal-kicker {
display: flex;
width: max-content;
max-width: 100%;
justify-content: center;
margin-inline: auto;
}
/* Technology modules become individually framed pieces with their own
softly enlarged vector symbol in the backdrop. */
.technology-title {
margin-bottom: 28px;
text-align: center;
}
.technology-rail {
gap: 12px;
}
.technology-rail article,
.technology-rail article:first-child,
.technology-rail article:nth-child(n+5) {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: 116px;
padding: 20px 18px;
border: 1px solid rgba(8, 123, 230, 0.13);
border-radius: 17px;
background:
radial-gradient(circle at 88% 75%, rgba(31, 197, 228, 0.12), transparent 42%),
linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(239, 249, 255, 0.9));
box-shadow: 0 12px 28px rgba(15, 86, 145, 0.065);
}
.technology-rail .card-watermark {
right: -10px;
bottom: -34px;
width: 124px;
height: 124px;
}
.technology-rail article:nth-child(2n) .card-watermark {
color: #14b8d4;
transform: rotate(7deg);
}
/* Consistent gradient headings across editorial sections. */
.news-head h2,
.hanoi-identity-copy h2,
.compact-head h2 {
color: transparent;
background: linear-gradient(102deg, #083f89 4%, #087be6 52%, #16bedf 96%);
-webkit-background-clip: text;
background-clip: text;
}
.news-head h2 span,
.hanoi-identity-copy h2 span,
.compact-head h2 span {
color: inherit;
}
.hanoi-identity-copy > p,
.compact-head > p {
font-size: clamp(0.84rem, 1.05vw, 0.96rem);
line-height: 1.68;
}
.news-head .portal-kicker {
text-align: center;
}
/* CTA: a symbolic data constellation embedded in the panel background.
The foreground shield remains the focal icon; this layer conveys scale. */
.portal-cta-inner::before {
position: absolute;
z-index: 0;
inset: 0;
background:
radial-gradient(circle at 8% 28%, rgba(255,255,255,.88) 0 2px, transparent 3px),
radial-gradient(circle at 22% 72%, rgba(103,226,255,.8) 0 3px, transparent 4px),
radial-gradient(circle at 44% 24%, rgba(255,255,255,.7) 0 2px, transparent 3px),
radial-gradient(circle at 63% 68%, rgba(103,226,255,.88) 0 3px, transparent 4px),
radial-gradient(circle at 81% 22%, rgba(255,255,255,.72) 0 2px, transparent 3px),
linear-gradient(24deg, transparent 24%, rgba(124,231,255,.16) 24.2% 24.5%, transparent 24.7%),
linear-gradient(154deg, transparent 38%, rgba(124,231,255,.15) 38.2% 38.5%, transparent 38.7%);
content: "";
opacity: 0.72;
pointer-events: none;
}
.portal-cta-inner > div {
position: relative;
z-index: 2;
}
@media (max-width: 720px) {
.portal-overview .portal-section-head h2 {
font-size: clamp(1.75rem, 8vw, 2.75rem);
}
.technology-rail article {
min-height: 108px;
}
}
@media (max-width: 440px) {
.portal-overview .portal-section-head h2 {
font-size: clamp(1.42rem, 7.3vw, 2rem);
letter-spacing: -0.04em;
}
.platform-intro-copy p,
.hanoi-identity-copy > p,
.compact-head > p {
font-size: 0.82rem;
}
}
/* ==========================================================================
Heading alignment + technology art + news hierarchy — 29/07/2026
========================================================================== */
/* These headings are standalone compositions; force their visual axis to the
exact centre instead of inheriting width from older two-column head layouts. */
.dashboard-section .light-head,
.dashboard-section .light-head > div,
.audience-head,
.audience-head > div,
.news-head,
.news-head > div {
width: 100%;
max-width: none;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.dashboard-section .light-head .portal-kicker {
display: inline-flex;
width: auto;
justify-content: center;
margin-right: auto;
margin-left: auto;
}
.audience-head h2,
.news-head h2 {
width: fit-content;
max-width: 100%;
margin-right: auto;
margin-left: auto;
text-align: center;
}
/* Technology remains a compact supporting section, but its label now reads as
a true small heading rather than micro-copy. */
.technology-title {
width: fit-content;
margin: 0 auto 30px;
color: transparent;
background: linear-gradient(100deg, #083f89, #087be6 58%, #16bedf);
-webkit-background-clip: text;
background-clip: text;
font-family: "Be Vietnam Pro", sans-serif;
font-size: clamp(1.32rem, 2.25vw, 1.72rem);
font-weight: 800;
letter-spacing: 0.035em;
line-height: 1.2;
text-align: center;
}
/* Turn the card-specific SVG clone into a visible background illustration.
Each card still uses its own subject icon: chain, IoT signal, database,
AI cloud, learning graph, GIS pin, API link or cloud infrastructure. */
.technology-rail .card-watermark {
right: 2px;
bottom: -18px;
width: 112px;
height: 112px;
color: #087be6;
opacity: 0.13;
stroke-width: 1.25;
filter: blur(0.15px) drop-shadow(0 0 18px rgba(13, 177, 224, 0.18));
}
.technology-rail article:nth-child(2n) .card-watermark {
color: #08a8c7;
opacity: 0.15;
}
.technology-rail article::before {
position: absolute;
z-index: 0;
right: -26px;
bottom: -42px;
width: 150px;
height: 150px;
border: 1px solid rgba(8, 123, 230, 0.08);
border-radius: 50%;
background:
radial-gradient(circle at 50% 50%, rgba(28, 195, 227, 0.12), transparent 48%),
repeating-radial-gradient(circle, transparent 0 19px, rgba(8, 123, 230, 0.045) 20px 21px);
content: "";
pointer-events: none;
}
.technology-rail article:nth-child(3n)::before {
border-radius: 28% 72% 62% 38%;
transform: rotate(18deg);
}
/* Restore the explicit two-level editorial hierarchy in every small post.
The old subgrid rule made h3 inherit rows from a non-grid parent and pushed
the headline outside the card. */
.news-secondary-grid .news-copy {
display: grid;
grid-row: auto;
grid-template-rows: auto 1fr;
align-content: start;
}
.news-secondary-grid .news-copy small {
display: block;
min-height: 2.7em;
color: #0873c7;
font-family: "IBM Plex Mono", monospace;
font-size: clamp(0.66rem, 0.9vw, 0.75rem);
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.35;
text-transform: uppercase;
}
.news-secondary-grid .news-copy h3 {
display: -webkit-box;
min-height: 3.9em;
margin: 8px 0 0;
overflow: hidden;
color: #093f82;
font-size: clamp(0.82rem, 1.22vw, 1rem);
font-weight: 750;
letter-spacing: -0.025em;
line-height: 1.3;
text-transform: none;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
line-clamp: 3;
}
@media (max-width: 720px) {
.technology-title {
font-size: clamp(1.2rem, 5vw, 1.5rem);
}
.news-secondary-grid .news-copy small {
min-height: auto;
}
.news-secondary-grid .news-copy h3 {
min-height: auto;
}
}
/* ==========================================================================
Generated contextual card imagery + final section copy — 29/07/2026
========================================================================== */
/* Dashboard title shares the same centred civic-blue gradient language as the
other primary section titles. */
.dashboard-section .light-head h2 {
width: fit-content;
max-width: min(100%, 920px);
margin-right: auto;
margin-left: auto;
color: transparent;
background: linear-gradient(102deg, #073f8b 3%, #087be6 55%, #19bddf 96%);
-webkit-background-clip: text;
background-clip: text;
text-align: center;
}
.dashboard-section .light-head h2 span {
color: inherit;
}
/* The generated atlases keep every card visually specific without adding
fourteen heavyweight image requests at runtime. Each pseudo-element reveals
one exact atlas tile and fades beneath the copy. */
.capability-card,
.technology-rail article {
isolation: isolate;
}
.capability-card::after,
.technology-rail article::after {
position: absolute;
z-index: 0;
inset: 0;
background-repeat: no-repeat;
content: "";
opacity: 0.95;
pointer-events: none;
transition: opacity 320ms ease, transform 520ms cubic-bezier(.2,.75,.2,1);
}
.capability-card::after {
background-image:
linear-gradient(90deg, rgba(250,253,255,.55) 0%, rgba(250,253,255,.32) 40%, rgba(250,253,255,.04) 100%),
url("assets/generated/capability-card-atlas-v1.png");
background-size: 100% 100%, 300% auto;
}
.capability-card:nth-child(1)::after { background-position: 0 0, 0% 0%; }
.capability-card:nth-child(2)::after { background-position: 0 0, 50% 0%; }
.capability-card:nth-child(3)::after { background-position: 0 0, 100% 0%; }
.capability-card:nth-child(4)::after { background-position: 0 0, 0% 100%; }
.capability-card:nth-child(5)::after { background-position: 0 0, 50% 100%; }
.capability-card:nth-child(6)::after { background-position: 0 0, 100% 100%; }
.technology-rail article::after {
background-image:
linear-gradient(90deg, rgba(250,253,255,.5) 0%, rgba(250,253,255,.28) 43%, rgba(250,253,255,.03) 100%),
url("assets/generated/technology-card-atlas-v1.png");
background-size: 100% 100%, 400% auto;
}
.technology-rail article:nth-child(1)::after { background-position: 0 0, 0% 0%; }
.technology-rail article:nth-child(2)::after { background-position: 0 0, 33.333% 0%; }
.technology-rail article:nth-child(3)::after { background-position: 0 0, 66.667% 0%; }
.technology-rail article:nth-child(4)::after { background-position: 0 0, 100% 0%; }
.technology-rail article:nth-child(5)::after { background-position: 0 0, 0% 100%; }
.technology-rail article:nth-child(6)::after { background-position: 0 0, 33.333% 100%; }
.technology-rail article:nth-child(7)::after { background-position: 0 0, 66.667% 100%; }
.technology-rail article:nth-child(8)::after { background-position: 0 0, 100% 100%; }
.capability-card:hover::after,
.technology-rail article:hover::after {
opacity: 1;
transform: scale(1.025);
}
/* Retire the earlier enlarged icon watermark now that every card has its own
richer scene-based artwork. */
.capability-card .card-watermark,
.technology-rail .card-watermark,
.technology-rail article::before {
display: none;
}
.capability-card > *,
.technology-rail article > * {
position: relative;
z-index: 2;
}
/* The card artwork now shows through clearly, so give the copy a soft white
halo to keep it legible against busy parts of the illustration. */
.capability-card strong,
.capability-card small,
.technology-rail strong,
.technology-rail small {
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.95),
0 -1px 0 rgba(255, 255, 255, 0.95),
1px 0 0 rgba(255, 255, 255, 0.95),
-1px 0 0 rgba(255, 255, 255, 0.95),
0 2px 4px rgba(255, 255, 255, 0.95),
0 0 16px rgba(255, 255, 255, 0.95);
}
@media (max-width: 720px) {
.capability-card::after,
.technology-rail article::after {
opacity: 0.85;
}
.dashboard-section .light-head h2 {
max-width: 18ch;
}
}
/* ==========================================================================
Section heading system — calibrated against the approved Claude artifact
========================================================================== */
:root {
--section-title-ink: #073f82;
--section-title-brand: #087be6;
--section-title-cyan: #16bddd;
}
/* Hero headline: keep every existing .hero-title-highlight sizing rule
untouched across breakpoints, just un-gradient the lead-in clause so it
reads as plain ink like the rest of the section titles. */
.hero-title-highlight .hero-title-plain {
background: none;
color: var(--section-title-ink);
-webkit-text-fill-color: var(--section-title-ink);
}
/* is used (instead of ) for the plain lead-in half of a section
title so the shared ":where(...) span" gradient rule skips it; reset the
browser's default bolder weight so it matches its gradient sibling. */
h2 > b {
font-weight: inherit;
}
/* One scale for every primary section title:
reference = 28px minimum / 3.3vw fluid / 42px maximum. */
:where(
.platform-intro-copy > h2,
.portal-section-head h2,
.supply-chain-head h2,
.technology-title,
.hanoi-identity-copy h2
) {
max-width: 900px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
color: var(--section-title-ink) !important;
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
font-family: "Be Vietnam Pro", sans-serif;
font-size: clamp(28px, 3.3vw, 42px) !important;
font-weight: 800 !important;
letter-spacing: -0.025em !important;
line-height: 1.12 !important;
text-wrap: balance;
-webkit-text-fill-color: currentColor !important;
}
:where(
.platform-intro-copy > h2,
.portal-section-head h2,
.supply-chain-head h2,
.technology-title,
.hanoi-identity-copy h2
) span {
color: transparent !important;
background: linear-gradient(102deg, var(--section-title-brand) 5%, #079ee5 58%, var(--section-title-cyan) 96%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
/* The label above a title follows the artifact's 12.5px / 0.12em rhythm. */
:where(.portal-kicker, .eyebrow) {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 9px;
width: auto !important;
margin: 0 0 14px !important;
color: #086bc1 !important;
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px !important;
font-weight: 700 !important;
letter-spacing: 0.12em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
:where(.portal-kicker, .eyebrow)::before {
flex: 0 0 22px;
width: 22px;
height: 2px;
border-radius: 2px;
background: currentColor;
content: "";
}
/* Standard space between the title system and its section content. */
:where(
.portal-section-head,
.supply-chain-head,
.technology-section .technology-title
) {
margin-bottom: clamp(32px, 3.5vw, 52px) !important;
}
/* Centred compositions mirror the reference's sec-head--center / --wide
treatment; the Hanoi identity split remains intentionally left aligned. */
.platform-intro-copy,
.portal-overview .portal-section-head,
.dashboard-section .light-head,
.audience-head,
.news-head,
.compact-head {
text-align: center;
}
.platform-intro-copy > h2,
.portal-overview .portal-section-head h2,
.dashboard-section .light-head h2,
.audience-head h2,
.news-head h2,
.compact-head h2,
.technology-title {
width: fit-content;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.supply-chain-head {
display: block;
width: min(100%, 900px);
margin-right: auto;
margin-left: auto;
text-align: center;
}
.supply-chain-head h2 {
width: fit-content;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.supply-chain-head > p,
.compact-head > p {
max-width: 780px;
margin: 16px auto 0;
font-size: clamp(14px, 1.2vw, 17px);
line-height: 1.7;
text-align: center;
}
.hanoi-identity-copy h2 {
text-align: left;
}
/* CTA is a campaign headline, but it uses the same maximum size and tracking
so the transition into the footer no longer feels like another page. */
.portal-cta-inner h2 {
font-size: clamp(28px, 3.3vw, 42px);
font-weight: 800;
letter-spacing: -0.025em;
line-height: 1.12;
text-wrap: balance;
}
@media (max-width: 720px) {
:where(
.platform-intro-copy > h2,
.portal-section-head h2,
.supply-chain-head h2,
.technology-title,
.hanoi-identity-copy h2,
.portal-cta-inner h2
) {
font-size: clamp(27px, 8vw, 34px) !important;
line-height: 1.14 !important;
}
:where(.portal-kicker, .eyebrow) {
font-size: 11px !important;
letter-spacing: 0.1em !important;
}
}
/* ==========================================================================
Supply chain: nine steps as one continuous, directional chain.
========================================================================== */
.flex-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 28px;
}
.flex-head .highlight-text {
color: var(--brand);
background: linear-gradient(135deg, var(--brand), #0f8658);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.supply-controls {
display: flex;
align-items: center;
gap: 14px;
}
.supply-btn-play {
background: rgba(8, 123, 230, 0.08);
color: var(--brand);
border: 1px solid rgba(8, 123, 230, 0.25);
font-weight: 700;
transition: all 0.25s ease;
}
.supply-btn-play:hover,
.supply-btn-play.playing {
background: var(--brand);
color: #fff;
box-shadow: 0 4px 14px rgba(8, 123, 230, 0.35);
}
.btn-group-nav {
display: flex;
gap: 6px;
}
.btn-icon-nav {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid rgba(8, 123, 230, 0.2);
background: #fff;
color: var(--brand);
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.btn-icon-nav:hover {
background: var(--brand);
color: #fff;
border-color: var(--brand);
transform: translateY(-1px);
}
/* SUPPLY CHAIN REFERENCE IMAGE MATRIX DESIGN */
.supply-chain-header-centered {
text-align: center;
margin-bottom: 36px;
}
.supply-chain-header-centered h2 {
font-size: 27px;
font-weight: 800;
color: var(--section-title-ink, #073f82);
letter-spacing: -0.01em;
margin-bottom: 6px;
}
.supply-chain-header-centered h2 .supply-title-highlight {
color: transparent;
background: linear-gradient(102deg, var(--section-title-brand, #087be6) 5%, #079ee5 58%, var(--section-title-cyan, #16bedf) 96%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.supply-chain-header-centered p {
font-size: 15px;
color: #475569;
margin: 0;
}
.supply-matrix-container {
position: relative;
width: 100%;
}
.matrix-nav-btn {
display: none;
position: absolute;
top: 74px;
transform: translateY(-50%);
z-index: 25;
width: 38px;
height: 38px;
border-radius: 50%;
background: #ffffff;
border: 1.5px solid rgba(8, 123, 230, 0.3);
color: #087be6;
font-size: 24px;
font-weight: 800;
line-height: 1;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
cursor: pointer;
transition: all 0.25s cubic-bezier(0.2, 0, 0, 1);
backdrop-filter: blur(8px);
}
.matrix-nav-btn:hover {
background: #087be6;
color: #ffffff;
border-color: #087be6;
transform: translateY(-50%) scale(1.12);
box-shadow: 0 6px 18px rgba(8, 123, 230, 0.35);
}
.matrix-nav-btn.matrix-prev {
left: -8px;
}
.matrix-nav-btn.matrix-next {
right: -8px;
}
.matrix-grid-scroll-wrapper {
width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(8, 123, 230, 0.3) transparent;
padding-bottom: 8px;
}
.matrix-grid-scroll-wrapper::-webkit-scrollbar {
height: 4px;
}
.matrix-grid-scroll-wrapper::-webkit-scrollbar-thumb {
background: rgba(8, 123, 230, 0.3);
border-radius: 4px;
}
.matrix-grid {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 8px;
position: relative;
z-index: 2;
}
.matrix-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
text-align: left;
padding: 4px 2px;
}
.step-circle-badge {
width: 28px;
height: 28px;
border-radius: 50%;
color: #fff;
font-size: 12px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
z-index: 3;
}
.step-circle-thumb {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: hidden;
border: 3px solid;
background: #fff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
margin-bottom: 12px;
z-index: 2;
}
.matrix-step:hover .step-circle-thumb {
transform: scale(1.08);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}
.step-circle-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.step-flow-arrow {
position: absolute;
top: 74px;
right: -8px;
transform: translateY(-50%);
font-size: 18px;
font-weight: 900;
line-height: 1;
z-index: 4;
pointer-events: none;
}
.step-matrix-title {
font-size: 11.5px;
font-weight: 800;
text-transform: uppercase;
line-height: 1.3;
margin-bottom: 8px;
min-height: 32px;
width: 100%;
text-align: center;
}
.step-bullet-list {
list-style: none;
padding: 0;
margin: 0;
font-size: 11px;
color: #334155;
line-height: 1.45;
width: 100%;
}
.step-bullet-list li {
position: relative;
padding-left: 10px;
margin-bottom: 2.5px;
word-break: break-word;
}
.step-bullet-list li::before {
content: "•";
position: absolute;
left: 0;
color: #64748b;
font-size: 11px;
}
/* Color Group Themes matching reference image */
/* Steps 01, 02 - Green */
.step-green .step-circle-badge { background: #00a859; }
.step-green .step-circle-thumb { border-color: #00a859; }
.step-green .step-flow-arrow { color: #00a859; }
.step-green .step-matrix-title { color: #00a859; }
/* Steps 03, 04, 05 - Blue */
.step-blue .step-circle-badge { background: #0066cc; }
.step-blue .step-circle-thumb { border-color: #0066cc; }
.step-blue .step-flow-arrow { color: #0066cc; }
.step-blue .step-matrix-title { color: #0066cc; }
/* Steps 06, 07 - Purple */
.step-purple .step-circle-badge { background: #7c3aed; }
.step-purple .step-circle-thumb { border-color: #7c3aed; }
.step-purple .step-flow-arrow { color: #7c3aed; }
.step-purple .step-matrix-title { color: #7c3aed; }
/* Step 08 - Orange */
.step-orange .step-circle-badge { background: #ea580c; }
.step-orange .step-circle-thumb { border-color: #ea580c; }
.step-orange .step-flow-arrow { color: #ea580c; }
.step-orange .step-matrix-title { color: #ea580c; }
/* Step 09 - Red */
.step-red .step-circle-badge { background: #dc2626; }
.step-red .step-circle-thumb { border-color: #dc2626; }
.step-red .step-flow-arrow { color: #dc2626; }
.step-red .step-matrix-title { color: #dc2626; }
@media (max-width: 1200px) {
.matrix-nav-btn {
display: flex;
}
.matrix-grid {
grid-template-columns: repeat(9, minmax(135px, 1fr));
min-width: 1215px;
}
}
@media (max-width: 768px) {
.matrix-grid {
grid-template-columns: repeat(3, 1fr);
overflow-x: visible;
gap: 20px 12px;
}
.step-flow-arrow { display: none; }
}
/* STANDALONE PARTNERS SECTION */
.standalone-partners-section {
background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
padding: 80px 0;
border-top: 1px solid rgba(226, 232, 240, 0.8);
}
.standalone-partners-section .portal-section-head {
text-align: center;
flex-direction: column;
align-items: center;
margin-bottom: 40px;
}
.standalone-partners-section .portal-section-head h2 {
text-align: center;
margin-inline: auto;
}
.standalone-partners-section .portal-section-head h2 span {
display: inline-block;
color: var(--brand, #087be6);
}
.standalone-partners-section .portal-section-head > p {
text-align: center;
margin-inline: auto;
margin-top: 12px;
}
.partners-grid-wrapper {
margin-top: 36px;
width: 100%;
}
.standalone-partner-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: stretch;
width: 100%;
}
.standalone-partner-card {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
width: 100% !important;
background: #ffffff !important;
border-radius: 16px !important;
border: 1px solid rgba(8, 123, 230, 0.14) !important;
padding: 24px 20px !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
height: 100% !important;
min-height: auto !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
transition: all 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}
.standalone-partner-card:hover {
transform: translateY(-5px) !important;
border-color: rgba(8, 123, 230, 0.4) !important;
box-shadow: 0 12px 28px -4px rgba(8, 123, 230, 0.16) !important;
}
.partner-logo-container {
height: 56px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
padding: 4px;
}
.partner-logo-container img {
max-height: 48px;
max-width: 170px;
object-fit: contain;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.04));
transition: transform 0.3s ease;
}
.standalone-partner-card:hover .partner-logo-container img {
transform: scale(1.06);
}
.standalone-partner-card strong {
font-size: 15px;
font-weight: 700;
color: #0f172a;
margin-bottom: 6px;
line-height: 1.35;
}
.standalone-partner-card small {
font-size: 12.5px;
color: #64748b;
line-height: 1.4;
margin-top: auto;
}
@media (max-width: 1024px) {
.standalone-partner-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 640px) {
.standalone-partner-grid {
grid-template-columns: 1fr;
gap: 14px;
}
}