/* UNIQUE_STYLE: saas-dashboard-blueprint */
:root {
  --bg: #06111f;
  --cyan: #4ee8ff;
  --page: #f6fbfb;
  --paper: #ffffff;
  --paper-soft: #eef7f5;
  --ink: #17313a;
  --muted: #5f7480;
  --line: #c9ddd8;
  --transit-blue: #2878b8;
  --relief: #2aa7b8;
  --stable: #4f9f68;
  --constrained: #d89a22;
  --hot: #c94e45;
  --rail: #7aa7b8;
  --soft: rgba(42,167,184,.10);
  --max: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.58; background: radial-gradient(circle at 18% 16%, rgba(42,167,184,.10), transparent 18rem), radial-gradient(circle at 82% 12%, rgba(216,154,34,.10), transparent 16rem), linear-gradient(90deg, rgba(122,167,184,.12) 1px, transparent 1px), linear-gradient(180deg, rgba(122,167,184,.10) 1px, transparent 1px), var(--page); background-size: auto, auto, 72px 72px, 72px 72px, auto; }
a { color: inherit; } a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; box-shadow: 0 0 0 6px rgba(78,232,255,.15); }
.clear-header { position: sticky; top: 0; z-index: 10; width: calc(100% - 28px); max-width: calc(var(--max) + 36px); margin: 16px auto 0; display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 14px 18px; background: rgba(255,255,255,.88); border: 1px solid var(--line); border-radius: 22px; backdrop-filter: blur(16px); box-shadow: 0 16px 42px rgba(23,49,58,.10); }
.clear-brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; } .clear-brand span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 14px; background: var(--transit-blue); color: white; font-weight: 900; } .clear-brand strong, .clear-kicker, footer a { color: var(--transit-blue); }
nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } nav a { padding: 8px 10px; border-radius: 999px; text-decoration: none; color: var(--muted); font-weight: 800; } nav a:hover { color: var(--transit-blue); background: var(--soft); }
main { width: min(var(--max), calc(100% - 32px)); margin: 0 auto; } section { margin: clamp(58px, 8vw, 100px) 0; }
.operations-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr); gap: clamp(28px, 5vw, 62px); align-items: center; min-height: calc(100svh - 108px); }
.clear-kicker { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .13em; font-weight: 900; font-size: .72rem; }
h1, h2, h3 { margin-top: 0; line-height: 1.02; } h1 { max-width: 14ch; font-size: clamp(3rem, 7.7vw, 6.5rem); letter-spacing: -.075em; color: var(--ink); } h2 { color: var(--ink); font-size: clamp(2rem, 4.2vw, 3.7rem); letter-spacing: -.06em; } h3 { color: var(--ink); }
.clear-copy > p:not(.clear-kicker) { color: var(--muted); max-width: 62ch; font-size: 1.08rem; } .clear-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.clear-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; padding: 13px 18px; border-radius: 999px; text-decoration: none; background: var(--transit-blue); color: #fff; font-weight: 900; box-shadow: 0 12px 24px rgba(40,120,184,.18); }
.clear-button.secondary { background: #fff; color: var(--transit-blue); border: 1px solid var(--rail); box-shadow: none; }
.field-photo, .corridor-photo, .planning-photo { margin: 0; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 18px 48px rgba(23,49,58,.10); } .field-photo img, .corridor-photo img, .planning-photo img { display: block; width: 100%; height: 230px; object-fit: cover; } figcaption { padding: 11px 14px; color: var(--muted); font-size: .9rem; }
.dashboard-mock.report-card, .route-semantics, .analytics-evidence, .signal-section, .workflow-rail, .case-study, .trust-console, .contact-panel { background: rgba(255,255,255,.88); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(23,49,58,.10); border-radius: 30px; padding: clamp(24px, 4vw, 40px); }
.report-topline { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: linear-gradient(180deg, #f8fcfb, #eef7f5); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; } .report-topline span { color: var(--transit-blue); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0; } .metric-grid article, .zone, .signal-grid article, .case-grid article, .graph-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 16px; }
.metric-grid span, .zone span { color: var(--transit-blue); text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 900; } .metric-grid strong { display: block; font-size: 2rem; color: var(--ink); } .metric-grid p, .zone p, .case-grid p, .trust-console p, .contact-panel p { color: var(--muted); }
.route-map { margin: 14px 0 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--paper); } .route-map img { display: block; width: 100%; height: auto; }
.zone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; } .zone.relief { border-top: 5px solid var(--relief); } .zone.constrained { border-top: 5px solid var(--constrained); } .zone.hot { border-top: 5px solid var(--hot); } .zone.stable { border-top: 5px solid var(--stable); }
.node.hot, .hub.hot { color: var(--hot); filter: none; }
.corridor-photo { margin-top: 18px; }
.graph-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; } .graph-card figcaption { padding: 0 0 14px; font-weight: 900; color: var(--ink); }
.curve { height: 160px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 8px; } .curve span { display: flex; align-items: end; justify-content: center; min-height: 28px; background: linear-gradient(180deg, var(--relief), #9bd7dd); color: #17313a; font-size: .72rem; font-weight: 900; border-radius: 12px 12px 4px 4px; padding-bottom: 6px; }
.bar-chart p, .impact-bars p { margin: 10px 0; background: var(--paper-soft); border-radius: 999px; overflow: hidden; } .bar-chart span, .impact-bars span { display: block; min-width: max-content; padding: 7px 10px; color: #fff; background: var(--transit-blue); border-radius: 999px; font-size: .78rem; font-weight: 900; }
.impact-bars span { background: var(--stable); } .signal-mix div { display: grid; gap: 8px; } .signal-mix span { padding: 10px; border-radius: 14px; background: var(--paper-soft); color: var(--muted); font-weight: 800; }
.signal-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; } .workflow-rail ol { list-style: none; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .workflow-rail li { position: relative; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--line); } .workflow-rail span { color: var(--relief); font-weight: 900; letter-spacing: .12em; }
.case-study { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; } .case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.contact-panel { display: flex; justify-content: space-between; gap: 24px; align-items: center; } footer { width: min(var(--max), calc(100% - 32px)); margin: 60px auto 28px; display: flex; justify-content: space-between; gap: 16px; color: var(--muted); }
@media (max-width: 980px) { .operations-hero, .signal-section, .case-study { grid-template-columns: 1fr; } .metric-grid, .zone-grid, .graph-grid, .case-grid, .workflow-rail ol { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .clear-header, footer, .contact-panel { flex-direction: column; align-items: flex-start; } nav { justify-content: flex-start; } main { width: calc(100% - 22px); } section { margin: 48px 0; } h1 { font-size: clamp(2.72rem, 16vw, 4.5rem); } .clear-actions, .clear-button { width: 100%; } .metric-grid, .zone-grid, .graph-grid, .case-grid, .workflow-rail ol { grid-template-columns: 1fr; } .dashboard-mock.report-card, .route-semantics, .analytics-evidence, .signal-section, .workflow-rail, .case-study, .trust-console, .contact-panel { padding: 20px; border-radius: 24px; } .field-photo img, .corridor-photo img, .planning-photo img { height: 220px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }


/* Shared demo navigation back to the Website Development page. */
.wd-back-link {
  position: sticky;
  top: 12px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  margin: 12px 0 0 max(12px, calc((100vw - var(--max, 1120px)) / 2));
  padding: 0.58rem 0.86rem;
  border: 1px solid rgba(30, 40, 34, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  font: 800 0.86rem/1.1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(30, 40, 34, 0.12);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

.wd-back-link:hover,
.wd-back-link:focus-visible,
.footer-back-to-web-development:hover,
.footer-back-to-web-development:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
}

.footer-back-to-web-development {
  display: inline-flex;
  margin-left: 1rem;
  font-weight: 900;
}

@media (max-width: 660px) {
  .wd-back-link {
    margin-left: 11px;
    max-width: calc(100vw - 22px);
  }

  .footer-back-to-web-development {
    display: inline-flex;
    margin-left: 0;
    margin-top: 0.7rem;
  }
}