:root {
  --navy: #0d2533;
  --navy-soft: #173b4e;
  --blue: #0c91bb;
  --aqua: #2bc2bd;
  --ink: #102d3d;
  --muted: #607482;
  --line: #dbe7eb;
  --surface: #f4f8f9;
  --white: #fff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.container { margin: 0 auto; width: min(1160px, calc(100% - 64px)); }

.site-header { align-items: center; display: flex; height: 90px; justify-content: space-between; }
.brand { align-items: center; color: var(--navy); display: inline-flex; font-family: "Manrope", sans-serif; font-size: 1.55rem; font-weight: 800; gap: 10px; letter-spacing: -.08em; }
.brand-dot { color: var(--aqua); }
.brand-symbol { display: flex; gap: 2px; height: 22px; transform: skewX(-18deg); width: 26px; }
.brand-symbol i { background: var(--blue); border-radius: 2px; display: block; width: 7px; }
.brand-symbol i:nth-child(1) { height: 12px; margin-top: 10px; }
.brand-symbol i:nth-child(2) { background: var(--aqua); height: 18px; margin-top: 4px; }
.brand-symbol i:nth-child(3) { height: 22px; }
.portal-label { color: var(--muted); font-size: .88rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.hero { align-items: center; display: grid; gap: 84px; grid-template-columns: 1fr .88fr; min-height: 590px; padding: 52px 0 78px; }
.eyebrow { align-items: center; color: var(--blue); display: flex; font-size: .77rem; font-weight: 700; gap: 8px; letter-spacing: .13em; margin: 0 0 20px; text-transform: uppercase; }
.eyebrow span { background: var(--aqua); border-radius: 50%; height: 7px; width: 7px; }
h1, h2 { font-family: "Manrope", sans-serif; }
h1 { color: var(--navy); font-size: clamp(2.8rem, 5.5vw, 4.8rem); letter-spacing: -.07em; line-height: 1.05; margin: 0; }
h1 strong { color: var(--blue); font-weight: 800; }
.intro { color: var(--muted); font-size: 1.15rem; line-height: 1.7; margin: 26px 0 32px; max-width: 480px; }
.dashboard-card { background: var(--navy); box-shadow: 25px 25px 0 #e5f2f3; color: var(--white); padding: 28px; position: relative; }
.dashboard-card::before { border: 1px solid rgba(255, 255, 255, .12); content: ""; inset: 13px; pointer-events: none; position: absolute; }
.card-top, .card-footer { align-items: center; display: flex; justify-content: space-between; position: relative; }
.card-title { font-size: .85rem; font-weight: 700; letter-spacing: .04em; }
.status { align-items: center; color: #b8d6da; display: flex; font-size: .68rem; gap: 5px; }
.status i, .card-footer span { background: var(--aqua); border-radius: 50%; display: inline-block; height: 6px; width: 6px; }
.metrics { border-bottom: 1px solid rgba(255, 255, 255, .16); display: grid; grid-template-columns: 1fr 1fr; margin-top: 27px; padding-bottom: 23px; position: relative; }
.metrics > div + div { border-left: 1px solid rgba(255, 255, 255, .16); padding-left: 26px; }
.metrics span { color: #94b2b8; display: block; font-size: .62rem; font-weight: 700; letter-spacing: .1em; }
.metrics strong { display: block; font-family: "Manrope", sans-serif; font-size: 2rem; letter-spacing: -.06em; margin-top: 3px; }
.metrics small { color: #b8d6da; font-size: .72rem; }
.chart { height: 176px; margin: 22px 0 14px; overflow: hidden; position: relative; }
.chart-grid { background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, rgba(255,255,255,.12) 44px); inset: 0; position: absolute; }
.bar { background: rgba(43,194,189,.4); bottom: 0; position: absolute; width: 9%; }
.bar-1 { height: 34%; left: 6%; } .bar-2 { height: 57%; left: 21%; } .bar-3 { height: 43%; left: 36%; }
.bar-4 { height: 72%; left: 51%; } .bar-5 { height: 57%; left: 66%; } .bar-6 { height: 88%; left: 81%; }
.trend-line { border-top: 2px solid #fff; left: 4%; position: absolute; top: 47%; transform: rotate(-10deg); transform-origin: left; width: 89%; }
.card-footer { color: #a9c4c8; font-size: .67rem; gap: 7px; justify-content: flex-start; }

.value-section { background: var(--surface); border-top: 1px solid var(--line); padding: 58px 0; }
.value-grid { display: grid; gap: 46px; grid-template-columns: repeat(3, 1fr); }
.number { color: var(--aqua); font-family: "Manrope", sans-serif; font-size: .84rem; font-weight: 800; }
.value-grid h2 { color: var(--navy); font-size: 1.15rem; letter-spacing: -.04em; line-height: 1.3; margin: 13px 0 9px; }
.value-grid p { color: var(--muted); font-size: .91rem; line-height: 1.6; margin: 0; }
.site-footer { align-items: center; color: var(--muted); display: flex; font-size: .78rem; justify-content: space-between; padding: 25px 0; }
.site-footer p { margin: 0; }.site-footer a { color: var(--navy); font-weight: 700; }.site-footer a:hover { color: var(--blue); }

@media (max-width: 760px) {
  .container { width: min(100% - 40px, 1160px); }
  .hero { gap: 55px; grid-template-columns: 1fr; padding: 54px 0 75px; }
  .hero-copy { max-width: 520px; }
  .dashboard-card { max-width: 480px; width: calc(100% - 19px); }
  .value-grid { gap: 32px; grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .container { width: min(100% - 32px, 1160px); }
  .site-header { height: 75px; }
  .portal-label { font-size: .7rem; }
  .brand { font-size: 1.3rem; }
  h1 { font-size: 2.75rem; }
  .intro { font-size: 1rem; }
  .dashboard-card { padding: 22px; }
  .metrics strong { font-size: 1.65rem; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
}