:root {
  color-scheme: light;
  --ink: #16213a;
  --muted: #69758d;
  --primary: #4f46e5;
  --teal: #0b9e94;
  --line: rgba(255, 255, 255, 0.76);
  --card: rgba(255, 255, 255, 0.88);
  --shadow: 0 18px 42px rgba(113, 132, 178, 0.18), inset 0 1px rgba(255, 255, 255, 0.72);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #f0f1ff; }
a { color: inherit; text-decoration: none; }

body::before,
body::after {
  position: fixed;
  z-index: -1;
  content: "";
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(48px);
  pointer-events: none;
}

body::before { top: -100px; left: -100px; background: rgba(158, 205, 255, 0.62); }
body::after { right: -140px; bottom: -90px; background: rgba(255, 223, 182, 0.5); }

.showcase-page { width: min(100%, 560px); margin: 0 auto; padding: 16px 12px 48px; }
.hero-section { margin-bottom: 16px; }
.hero-link { position: relative; display: block; border-radius: 24px; outline-offset: 4px; }
.hero-link:focus-visible, .contact-button:focus-visible, .service-card:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.5); }
.hero-link img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 24px; box-shadow: var(--shadow); }
.hero-hint { position: absolute; right: 14px; bottom: 14px; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 999px; color: #fff; background: rgba(22, 33, 58, 0.72); font-size: 10px; font-weight: 700; letter-spacing: 0.03em; box-shadow: 0 8px 18px rgba(22, 33, 58, 0.18); }

.entry-card { position: relative; display: flex; min-height: 150px; overflow: hidden; color: inherit; text-decoration: none; border: 1px solid rgba(208, 219, 240, 0.85); border-radius: 24px; background: rgba(255, 255, 255, 0.86); box-shadow: var(--shadow); }
.entry-copy { position: relative; z-index: 1; width: 54%; flex: 0 0 54%; padding: 29px 18px 24px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); }
.entry-card img { position: relative; inset: auto; width: 46%; height: auto; min-height: 150px; flex: 0 0 46%; object-fit: cover; object-position: center; }
.entry-title-cta { display: inline-flex; align-items: center; min-height: 40px; margin-top: 13px; padding: 7px 20px; border: 1px solid rgba(105, 91, 225, 0.28); border-radius: 999px; color: #4f46e5; background: linear-gradient(135deg, rgba(238, 235, 255, 0.98), rgba(218, 214, 255, 0.92)); box-shadow: 0 8px 18px rgba(79, 70, 229, 0.13), inset 0 1px rgba(255, 255, 255, 0.86); transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.entry-title-cta:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.5); outline-offset: 4px; }
.entry-title-cta:hover { background: linear-gradient(135deg, rgba(232, 228, 255, 1), rgba(207, 201, 255, 0.96)); box-shadow: 0 10px 22px rgba(79, 70, 229, 0.2), inset 0 1px rgba(255, 255, 255, 0.92); transform: translateY(-1px); }
.entry-title-cta h1 { margin: 0; color: inherit; font-size: 21px; letter-spacing: -0.03em; line-height: 1.15; }

.showcase-section { margin-top: 28px; }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 4px 12px; }
.section-heading h2 { margin: 0; color: #66758f; font-size: 18px; letter-spacing: 0.06em; }
.section-heading > span, .section-heading a { color: #7e8aa0; font-size: 11px; font-weight: 600; }
.section-heading a { color: #66758f; }

.horizontal-rail { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; touch-action: pan-x; overscroll-behavior-x: contain; overscroll-behavior-y: none; }
.horizontal-rail::-webkit-scrollbar { display: none; }
.horizontal-rail > * { flex: 0 0 min(78vw, 280px); scroll-snap-align: start; }

.network-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(4px, 2vw, 10px); row-gap: 0; }
.network-card { display: grid; grid-template-columns: clamp(28px, 8vw, 42px) minmax(0, 1fr); min-height: 88px; align-items: center; gap: clamp(4px, 1.6vw, 7px); padding: 10px clamp(2px, 1.6vw, 7px); border-radius: 18px; color: #203b73; font-size: clamp(8px, 2.4vw, 12px); font-weight: 700; line-height: 1.35; text-align: left; transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease; }
.network-card span { display: flex; min-width: 0; min-height: 32px; align-items: center; white-space: nowrap; }
.network-card:last-child span { display: block; min-height: 0; white-space: nowrap; }
.network-card:hover, .network-card:focus-visible { background: rgba(255, 255, 255, 0.22); box-shadow: 0 8px 20px rgba(73, 117, 190, 0.1); transform: translateY(-2px); }
.network-card:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.5); outline-offset: 4px; }
.network-card:active { transform: scale(0.97); }
.pill-icon { display: grid; width: clamp(28px, 8vw, 42px); height: clamp(28px, 8vw, 42px); flex: 0 0 clamp(28px, 8vw, 42px); place-items: center; border: 1.5px solid rgba(255, 255, 255, 0.94); border-radius: clamp(10px, 2.6vw, 14px); box-shadow: 0 8px 18px rgba(73, 117, 190, 0.17), 0 0 0 1px rgba(62, 96, 166, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.42); font-style: normal; font-size: clamp(16px, 4.2vw, 22px); font-weight: 500; }
.lightbulb { color: #2d56c4; background: #c9ddff; }
.globe { color: #087796; background: #c8ebf4; }
.network { color: #5737c9; background: #d9d0ff; }
.school { color: #215f92; background: #cfe5fb; }
.health { color: #4a54bd; background: #d8d9ff; }
.scene { color: #2e59c5; background: #c8ddff; }
.policy { color: #2459d8; background: #dfe9ff; }
.center { color: #475569; background: #e6ebf2; }

.service-card { position: relative; min-height: 154px; padding: 18px; overflow: hidden; border: 1px solid rgba(214, 224, 242, 0.9); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); transition: transform 180ms ease, box-shadow 180ms ease; }
.service-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(113, 132, 178, 0.23), inset 0 1px rgba(255, 255, 255, 0.82); }
.service-card::before { position: absolute; top: 0; left: 0; right: 0; height: 4px; content: ""; background: var(--accent); }
.service-card-top { display: flex; align-items: center; gap: 8px; }
.service-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); font-size: 22px; }
.service-badge { margin-left: auto; padding: 6px 9px; border-radius: 8px; color: var(--accent); background: var(--accent-pale); font-size: 10px; font-weight: 700; }
.service-arrow { color: #7b879d; font-size: 20px; }
.service-card h3 { margin: 13px 0 0; font-size: 18px; }
.service-card p { margin: 6px 0 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.service-indigo { --accent: #4f46e5; --accent-soft: #e2e5ff; --accent-pale: #eef0ff; }
.service-teal { --accent: #0b9e94; --accent-soft: #d7f8f1; --accent-pale: #e7fbf7; }
.service-amber { --accent: #d98722; --accent-soft: #fff0cd; --accent-pale: #fff6e1; }
.service-rose { --accent: #dc5471; --accent-soft: #ffe3e9; --accent-pale: #fff0f3; }

.activity-section { margin-top: 22px; }
.activity-heading { position: relative; margin: 0 4px 22px; padding-left: 12px; }
.activity-heading::before { position: absolute; top: 2px; bottom: 2px; left: 0; width: 4px; content: ""; border-radius: 999px; background: linear-gradient(180deg, #7f89ee, #b5c9ff); box-shadow: 0 4px 12px rgba(127, 137, 238, 0.24); }
.activity-kicker { display: block; color: #7f89ee; font-size: 11px; font-weight: 800; letter-spacing: 0.24em; }
.activity-heading h2 { margin: 8px 0 0; color: #172842; font-size: 23px; font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; }
.activity-list { display: grid; gap: 16px; }
.activity-card { padding: 20px 18px 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.92); border-radius: 26px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 16px 36px rgba(129, 139, 194, 0.13), inset 0 1px rgba(255, 255, 255, 0.82); }
.activity-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.activity-status, .activity-tag { display: inline-flex; min-height: 30px; align-items: center; padding: 5px 13px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; }
.activity-status-open { color: #0a9d7a; border: 1px solid #a5ecd3; background: #effff9; }
.activity-status-upcoming { color: #d77a08; border: 1px solid #f5d58a; background: #fff9e9; }
.activity-status-closed { color: #718096; border: 1px solid #d7deeb; background: #f2f5fa; }
.activity-status-pending { color: #7b6acb; border: 1px solid #d8d2ff; background: #f4f1ff; }
.activity-tag { color: #686ee2; background: #eef0ff; }
.activity-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 12px; }
.activity-title-row h3 { flex: 1; margin: 0; color: #26344d; font-size: 16px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.45; }
.activity-card-arrow { flex: 0 0 auto; color: #7884ee; font-size: 24px; font-weight: 400; line-height: 1; }
.activity-meta { display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 10px; color: #6b7b95; font-size: 11px; line-height: 1.45; white-space: nowrap; }
.activity-meta > span { display: inline-flex; min-width: 0; align-items: center; gap: 3px; flex: 0 0 auto; }
.activity-location { overflow: hidden; text-overflow: ellipsis; }
.activity-meta > span:last-child { flex: 1 1 auto; }
.meta-icon { width: 14px; height: 14px; flex: 0 0 14px; }
.activity-state { margin: 0; padding: 24px 18px; border: 1px solid rgba(255, 255, 255, 0.84); border-radius: 24px; color: var(--muted); background: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.6; }
.activity-card[href] { display: block; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; }
.activity-card[href]:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(129, 139, 194, 0.18), inset 0 1px rgba(255, 255, 255, 0.82); }
.activity-card[href]:focus-visible { outline: 3px solid rgba(79, 70, 229, 0.45); outline-offset: 4px; }

.image-viewer[hidden] { display: none; }
.image-viewer { position: fixed; z-index: 20; inset: 0; display: block; overflow-x: hidden; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.image-viewer-backdrop { position: fixed; z-index: 0; inset: 0; background: rgba(10, 24, 58, 0.78); backdrop-filter: blur(10px); }
.image-viewer-dialog { position: relative; z-index: 1; width: min(100%, 560px); min-height: 100%; height: auto; max-height: none; margin: 0 auto; overflow: visible; padding-bottom: clamp(72px, 12vh, 112px); outline: none; touch-action: pan-y; }
.image-viewer-image-wrap { display: block; max-height: none; overflow: visible; }
.image-viewer-image-wrap img { display: block; width: 100%; max-width: 100%; height: auto; max-height: none; }
body.viewer-open { overflow: hidden; }

.contact-panel { margin-top: 28px; padding: 24px 20px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 244, 255, 0.78)); box-shadow: var(--shadow); }
.contact-panel h2 { margin: 10px 0 8px; font-size: 23px; letter-spacing: -0.03em; }
.contact-panel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.8; }
.eyebrow { color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: 0.08em; }
.entry-copy p { max-width: 270px; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.contact-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 16px; border-radius: 999px; color: white; background: var(--primary); font-size: 13px; font-weight: 700; box-shadow: 0 10px 22px rgba(79, 70, 229, 0.24); }

@media (min-width: 700px) {
  .showcase-page { padding-top: 28px; }
  .horizontal-rail > * { flex-basis: 280px; }
}

@media (max-width: 519px) {
  #network .activity-heading { margin-bottom: clamp(6px, 2vw, 10px); }
  .network-grid { row-gap: clamp(0px, 0.5vw, 2px); }
  .network-card { min-height: clamp(56px, 15vw, 64px); padding-block: clamp(6px, 1.8vw, 8px); }
  #network + .activity-section { margin-top: 12px; }
}