.departments-page { --dept-blue: #63adff; background: #050706; }
.departments-page .nav-active { color: var(--green); }
.departments-page .site-header { background: rgba(5, 7, 6, .82); }

.department-hero {
  position: relative; min-height: 1130px; padding-top: 180px; text-align: center; isolation: isolate;
}
.department-hero::before {
  content: ""; position: absolute; z-index: -3; top: -330px; left: 50%; width: 1050px; height: 850px; transform: translateX(-50%);
  border-radius: 50%; background: rgba(27, 152, 97, .23); filter: blur(130px);
}
.department-hero-grid {
  position: absolute; z-index: -2; top: 75px; left: 50%; width: 1300px; height: 780px; transform: translateX(-50%);
  background-image: linear-gradient(rgba(91,255,177,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(91,255,177,.045) 1px, transparent 1px);
  background-size: 66px 66px; mask-image: radial-gradient(ellipse 65% 56% at 50% 35%, #000 8%, transparent 75%);
}
.hero-beacon { position: absolute; z-index: -1; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 12px rgba(91,255,177,.03), 0 0 35px var(--green); }
.beacon-a { top: 285px; left: 8%; }.beacon-b { top: 400px; right: 9%; animation: beacon 2.2s ease-in-out infinite; }
@keyframes beacon { 50% { opacity: .35; transform: scale(.65); } }
.department-hero-copy { position: relative; z-index: 2; max-width: 930px; margin: 0 auto; }
.department-hero h1 { margin: 28px 0 24px; font-size: clamp(58px, 7.4vw, 98px); line-height: .98; letter-spacing: -.068em; font-weight: 770; }
.department-hero h1 span { color: transparent; background: linear-gradient(103deg, #eff8f3, #67ffb8 53%, #d8ffec); -webkit-background-clip: text; background-clip: text; }
.department-hero-copy>p { max-width: 650px; margin: 0 auto; color: #9ba49f; font-size: 17px; line-height: 1.7; }
.department-proof { margin-top: 26px; display: flex; justify-content: center; align-items: center; gap: 18px; color: #65706a; font-size: 9px; }
.department-proof span { display: flex; align-items: center; gap: 7px; color: #96a19b; }.department-proof span i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green); }.department-proof b { font-weight: 500; }

.department-hero-ui { position: relative; z-index: 3; width: 1100px; height: 620px; margin: 80px auto 0; text-align: left; }
.department-hero-ui::after { content: ""; position: absolute; z-index: -2; left: 14%; right: 14%; bottom: 20px; height: 120px; border-radius: 50%; background: rgba(91,255,177,.2); filter: blur(70px); }
.dept-app-frame { width: 100%; height: 580px; display: grid; grid-template-columns: 205px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 21px; background: #090d0a; box-shadow: 0 50px 110px rgba(0,0,0,.6); transform: perspective(1600px) rotateX(2deg); }
.dept-sidebar { padding: 20px 13px 14px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.06); background: #080b09; }
.dept-app-logo { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #07110b; background: var(--green); font-size: 10px; font-weight: 850; }
.dept-workspace { margin-top: 23px; padding: 9px; display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: #0e120f; }
.dept-workspace>span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; color: #07110b; background: linear-gradient(135deg, var(--green), #d7ffeb); font-size: 7px; font-weight: 850; }.dept-workspace div { display: flex; flex-direction: column; gap: 3px; }.dept-workspace b { font-size: 8px; }.dept-workspace small,.dept-user small { color: #59625c; font-size: 6px; }.dept-workspace>i { color: #59625c; font-size: 7px; font-style: normal; }
.dept-sidebar nav { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }.dept-sidebar nav a,.sidebar-bottom>a { padding: 9px; display: grid; grid-template-columns: 17px 1fr auto; align-items: center; border-radius: 7px; color: #68716b; font-size: 7px; }.dept-sidebar nav a span,.sidebar-bottom>a span { color: #7c867f; font-size: 11px; }.dept-sidebar nav a.active { color: #d6dcd8; background: rgba(91,255,177,.08); }.dept-sidebar nav a.active span { color: var(--green); }.dept-sidebar nav a em { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; color: var(--green); background: rgba(91,255,177,.08); font-size: 6px; font-style: normal; }
.sidebar-bottom { margin-top: auto; }.sidebar-bottom>a { margin-bottom: 10px; }.dept-user { padding-top: 13px; display: grid; grid-template-columns: 27px 1fr auto; gap: 8px; align-items: center; border-top: 1px solid rgba(255,255,255,.06); }.dept-user>span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: #07110b; background: #8effc9; font-size: 6px; font-weight: 800; }.dept-user div { display: flex; flex-direction: column; gap: 3px; }.dept-user b { font-size: 7px; }.dept-user>i { color: #555e58; font-size: 6px; font-style: normal; }
.dept-app-main { padding: 27px; min-width: 0; background: radial-gradient(circle at 100% 0, rgba(91,255,177,.035), transparent 34%), #0b0f0c; }
.dept-topbar { display: flex; justify-content: space-between; align-items: center; }.dept-topbar>div:first-child { display: flex; flex-direction: column; gap: 5px; }.dept-topbar small { color: #5e6761; font-size: 7px; }.dept-topbar h2 { margin: 0; font-size: 17px; letter-spacing: -.025em; }.dept-topbar>div:last-child { display: flex; gap: 6px; }
.dept-topbar button,.visual-toolbar button,.experience-top button { height: 29px; padding: 0 10px; border: 0; border-radius: 6px; font-size: 6px; font-weight: 700; }.icon-button,.outline-button { color: #8d9690; border: 1px solid rgba(255,255,255,.08)!important; background: #101512; }.icon-button { width: 29px; padding: 0!important; }.green-button,.visual-toolbar button,.experience-top button { color: #07110b; background: var(--green); }
.dept-overview-cards { margin-top: 25px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.dept-overview-cards article { padding: 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; background: #0e1310; }.metric-label { display: flex; align-items: center; gap: 7px; }.metric-label small { color: #6c756f; font-size: 6px; }.metric-icon { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; font-size: 8px; }.metric-icon.green { color: var(--green); background: rgba(91,255,177,.08); }.metric-icon.purple { color: var(--purple); background: rgba(185,151,255,.08); }.metric-icon.amber { color: var(--amber); background: rgba(255,199,102,.08); }.dept-overview-cards strong { display: block; margin: 12px 0 5px; font-size: 21px; }.dept-overview-cards em { color: var(--green); font-size: 6px; font-style: normal; }
.dept-table-head { margin: 25px 0 9px; display: flex; align-items: center; gap: 7px; }.dept-table-head>div:first-child { display: flex; align-items: baseline; gap: 8px; margin-right: auto; }.dept-table-head h3 { margin: 0; font-size: 12px; }.dept-table-head span { color: #606963; font-size: 6px; }.fake-input { min-width: 155px; padding: 9px 10px; border: 1px solid rgba(255,255,255,.06); border-radius: 6px; color: #555e58; background: #0f1411; font-size: 6px; }.dept-table-head button { height: 28px; padding: 0 9px; border-radius: 6px; font-size: 6px; }
.dept-roster-table { overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; }.roster-row { min-height: 57px; padding: 0 12px; display: grid; grid-template-columns: 1.3fr .8fr .85fr .8fr 25px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.05); color: #8b948e; font-size: 7px; }.roster-row:last-child { border-bottom: 0; }.roster-row>span:first-child { display: flex; align-items: center; gap: 8px; color: #d0d6d2; }.roster-row>span:last-child { color: #515a54; }.roster-header { min-height: 31px; color: #4e5751; background: #0f1411; font-size: 5px; }.roster-header>span:first-child { color: #4e5751; }.roster-avatar { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 7px; color: #08110c; font-size: 6px; font-style: normal; font-weight: 850; }.duty-status { display: inline-flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: 5px; font-size: 5px; font-style: normal; }.duty-status i { width: 4px; height: 4px; border-radius: 50%; }.duty-status.on { color: var(--green); background: rgba(91,255,177,.07); }.duty-status.on i { background: var(--green); }.duty-status.off { color: #7d8680; background: rgba(255,255,255,.04); }.duty-status.off i { background: #6b746e; }.duty-status.break { color: var(--amber); background: rgba(255,199,102,.06); }.duty-status.break i { background: var(--amber); }.roster-row>span:nth-child(4) { display: flex; flex-direction: column; gap: 3px; }.roster-row>span:nth-child(4) strong { color: #b8c0bb; font-size: 7px; }.roster-row>span:nth-child(4) small { color: #4f5752; font-size: 5px; }
.floating-shift-card { position: absolute; z-index: 4; left: -40px; bottom: 3px; width: 250px; padding: 15px; border: 1px solid rgba(255,255,255,.11); border-radius: 13px; background: rgba(13,18,15,.95); box-shadow: 0 22px 50px rgba(0,0,0,.45); backdrop-filter: blur(15px); }.floating-card-top { display: flex; align-items: center; gap: 9px; }.pulse-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: rgba(91,255,177,.08); }.floating-card-top>div { display: flex; flex: 1; flex-direction: column; gap: 3px; }.floating-card-top small { color: #626b65; font-size: 6px; }.floating-card-top b { font-size: 8px; }.floating-card-top em { padding: 4px 5px; border-radius: 4px; color: #07110b; background: var(--green); font-size: 5px; font-style: normal; font-weight: 850; }.shift-members { display: flex; align-items: center; margin-top: 14px; }.shift-members .roster-avatar,.more-members { width: 24px; height: 24px; margin-right: -6px; border: 2px solid #0e1310; }.more-members { display: grid; place-items: center; border-radius: 7px; color: #9ca59f; background: #202721; font-size: 5px; }.shift-members b { margin-left: 13px; color: #737c76; font-size: 6px; font-weight: 600; }
.floating-signal-card { position: absolute; z-index: 4; right: -26px; top: 105px; width: 160px; padding: 12px; display: grid; grid-template-columns: 8px 1fr auto; gap: 8px; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(13,18,15,.96); box-shadow: 0 20px 45px rgba(0,0,0,.4); }.floating-signal-card>i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }.floating-signal-card>div { display: flex; flex-direction: column; gap: 3px; }.floating-signal-card small { color: #5f6862; font-size: 5px; }.floating-signal-card b { font-size: 9px; }.floating-signal-card em { color: var(--green); font-size: 6px; font-style: normal; }

.department-stats { margin-top: 15px; padding: 28px 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.department-stats>div { display: flex; flex-direction: column; align-items: center; gap: 6px; border-right: 1px solid var(--line); }.department-stats>div:last-child { border-right: 0; }.department-stats strong { font-size: 25px; letter-spacing: -.045em; }.department-stats span { color: #626b65; font-size: 8px; }

.department-intro { padding: 160px 0 130px; }.department-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.dept-feature-card { position: relative; min-height: 600px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(145deg,#0d120f,#080b09); }.dept-feature-card::before { content: ""; position: absolute; width: 380px; height: 300px; right: -170px; bottom: -180px; border-radius: 50%; background: rgba(91,255,177,.08); filter: blur(65px); }.feature-copy { position: relative; z-index: 2; max-width: 420px; padding: 42px; }.feature-copy.compact { max-width: 520px; }.feature-number { display: block; margin-bottom: 24px; color: #515a54; font-family: monospace; font-size: 8px; }.feature-copy .kicker { margin: 0 0 14px; }.feature-copy h3 { margin: 0 0 15px; font-size: 32px; line-height: 1.15; letter-spacing: -.045em; }.feature-copy>p:last-of-type { margin: 0; color: #8d9690; font-size: 13px; line-height: 1.7; }.feature-copy a { display: inline-flex; gap: 8px; margin-top: 22px; color: #d5dbd7; font-size: 11px; font-weight: 700; }.feature-copy a span { color: var(--green); }
.roster-feature { grid-column: 1/-1; min-height: 620px; }.roster-feature .feature-copy { position: absolute; top: 50%; left: 0; transform: translateY(-50%); }.roster-visual { position: absolute; right: -35px; top: 80px; width: 620px; height: 500px; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: #0a0e0b; box-shadow: 0 35px 70px rgba(0,0,0,.4); transform: perspective(1100px) rotateY(-6deg); }.visual-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; }.visual-toolbar>div { display: flex; flex-direction: column; gap: 4px; }.visual-toolbar small { color: #5d6660; font-size: 6px; }.visual-toolbar b { font-size: 12px; }.rank-block { margin-bottom: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.06); border-radius: 9px; }.rank-title { height: 46px; padding: 0 12px; display: grid; grid-template-columns: 25px 1fr auto 20px; gap: 8px; align-items: center; background: #0f1411; }.rank-badge { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; font-size: 6px; font-weight: 850; }.rank-badge.command { color: var(--green); background: rgba(91,255,177,.08); }.rank-badge.supervision { color: var(--purple); background: rgba(185,151,255,.08); }.rank-title b { font-size: 8px; }.rank-title small { color: #5d6660; font-size: 6px; }.rank-title i { color: #5d6660; font-size: 7px; font-style: normal; text-align: right; }.visual-member { height: 56px; padding: 0 13px; display: grid; grid-template-columns: 28px 1fr 8px 20px; gap: 8px; align-items: center; border-top: 1px solid rgba(255,255,255,.05); }.visual-member>div { display: flex; flex-direction: column; gap: 4px; }.visual-member b { font-size: 7px; }.visual-member small { color: #5b645e; font-size: 6px; }.visual-member em { width: 5px; height: 5px; border-radius: 50%; background: #444c47; }.visual-member em.online-dot { background: var(--green); box-shadow: 0 0 6px var(--green); }.visual-member>span:last-child { color: #4e5751; font-size: 6px; }
.shouts-feature,.activity-feature { min-height: 590px; }.shout-stack { position: absolute; left: 35px; right: 35px; bottom: 30px; height: 260px; }.shout-card { position: absolute; left: 50%; width: 100%; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #101512; }.shout-back { top: 0; width: 78%; height: 140px; opacity: .25; }.shout-mid { top: 13px; width: 88%; height: 160px; opacity: .5; }.shout-main { top: 28px; padding: 19px; box-shadow: 0 22px 40px rgba(0,0,0,.3); }.shout-author { display: flex; align-items: center; gap: 9px; }.shout-author>div { display: flex; flex: 1; flex-direction: column; gap: 3px; }.shout-author b { font-size: 8px; }.shout-author small { color: #5d6660; font-size: 6px; }.shout-author em { padding: 4px 5px; border-radius: 4px; color: var(--green); background: rgba(91,255,177,.07); font-size: 5px; font-style: normal; }.shout-main>p { margin: 16px 0; color: #77817b; font-size: 8px; line-height: 1.6; }.shout-main>p strong { color: #cbd2cd; font-size: 9px; }.shout-footer { padding-top: 11px; display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.06); color: #59625c; font-size: 6px; }.shout-footer span:last-child { color: var(--green); }
.dispatch-feature { grid-column: 1/-1; min-height: 650px; }.dispatch-map { position: absolute; top: 0; bottom: 0; left: 0; width: 62%; overflow: hidden; border-right: 1px solid var(--line); background: #0a0e0b; }.map-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(91,255,177,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(91,255,177,.04) 1px,transparent 1px); background-size: 36px 36px; }.map-road { position: absolute; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.035); }.road-a { left: -5%; top: 45%; width: 110%; height: 30px; transform: rotate(-11deg); }.road-b { left: 42%; top: -10%; width: 32px; height: 120%; transform: rotate(21deg); }.road-c { left: 8%; top: -15%; width: 25px; height: 130%; transform: rotate(-27deg); }.map-zone { position: absolute; color: rgba(91,255,177,.13); font-size: 42px; font-weight: 800; }.zone-a { top: 16%; left: 14%; }.zone-b { bottom: 12%; right: 13%; }.unit-marker { position: absolute; display: flex; align-items: center; gap: 5px; color: #cbd4ce; font-size: 6px; font-weight: 750; }.unit-marker i { width: 10px; height: 10px; border: 3px solid #08100c; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px rgba(91,255,177,.2), 0 0 15px rgba(91,255,177,.35); }.unit-1 { top: 28%; left: 29%; }.unit-2 { bottom: 25%; right: 20%; }.unit-3 { top: 47%; left: 53%; }.unit-marker.urgent i { background: var(--coral); box-shadow: 0 0 0 2px rgba(255,127,115,.2),0 0 16px rgba(255,127,115,.45); animation: urgentPulse 1.4s ease-out infinite; }.unit-marker.urgent span { color: #ff9d93; }.dispatch-call { position: absolute; left: 32px; bottom: 32px; width: 280px; padding: 17px; border: 1px solid rgba(255,127,115,.2); border-radius: 12px; background: rgba(15,20,17,.96); box-shadow: 0 24px 50px rgba(0,0,0,.4); }.call-top { display: flex; justify-content: space-between; }.call-top span { color: var(--coral); font-size: 6px; font-weight: 850; letter-spacing: .08em; }.call-top em { color: #7f8882; font-size: 6px; font-style: normal; }.dispatch-call>b { display: block; margin-top: 12px; font-size: 11px; }.dispatch-call>p { margin: 6px 0 14px; color: #68716b; font-size: 7px; }.dispatch-call>div:last-child { display: flex; align-items: center; }.dispatch-call .roster-avatar { width: 23px; height: 23px; margin-right: -6px; border: 2px solid #0f1411; }.dispatch-call button { margin-left: auto; padding: 6px 8px; border: 0; border-radius: 5px; color: #07110b; background: var(--green); font-size: 6px; font-weight: 700; }.dispatch-copy { position: absolute; top: 50%; right: 0; width: 38%; transform: translateY(-50%); }.dispatch-copy h3 { font-size: 35px; }
@keyframes urgentPulse { 70% { box-shadow: 0 0 0 14px rgba(255,127,115,0); } }
.activity-visual { position: absolute; left: 35px; right: 35px; bottom: 34px; height: 250px; padding: 20px; border: 1px solid rgba(255,255,255,.07); border-radius: 13px; background: #0d120f; }.activity-header { display: flex; justify-content: space-between; align-items: flex-start; }.activity-header>div { display: flex; flex-direction: column; gap: 6px; }.activity-header small { color: #616a64; font-size: 6px; }.activity-header b { font-size: 18px; }.activity-header b em { margin-left: 7px; color: var(--green); font-size: 6px; font-style: normal; }.activity-header>span { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: #68716b; font-size: 6px; }.activity-chart { height: 130px; margin-top: 19px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.06); }.activity-chart i { height: var(--h); flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg,var(--green),#1a6d43); opacity: .9; }.activity-days { padding-top: 8px; display: flex; justify-content: space-between; color: #48514b; font-size: 5px; }

.department-experience { padding: 140px 0; background: linear-gradient(180deg, transparent, rgba(91,255,177,.025), transparent); }.experience-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 70px; margin-bottom: 48px; }.experience-heading>div { max-width: 720px; }.experience-heading h2,.workflow-heading h2,.integration-inner h2 { margin: 14px 0 0; font-size: 52px; line-height: 1.08; letter-spacing: -.055em; }.experience-heading>p { max-width: 360px; margin: 0; color: #87908b; font-size: 13px; line-height: 1.7; }
.experience-tabs { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }.experience-tab { height: 62px; display: flex; justify-content: center; align-items: center; gap: 10px; border: 0; border-right: 1px solid var(--line); color: #626b65; background: #090c0a; font-size: 10px; font-weight: 700; cursor: pointer; transition: .2s ease; }.experience-tab:last-child { border-right: 0; }.experience-tab span { color: #414944; font-family: monospace; font-size: 7px; }.experience-tab:hover,.experience-tab.active { color: #e8eeea; background: rgba(91,255,177,.055); }.experience-tab.active span { color: var(--green); }
.experience-stage { height: 590px; margin-top: 15px; display: grid; grid-template-columns: 50px 170px 1fr; overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: #0a0e0b; box-shadow: 0 40px 85px rgba(0,0,0,.35); }.experience-nav { padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 17px; border-right: 1px solid rgba(255,255,255,.055); background: #080b09; }.experience-nav .dept-app-logo { width: 25px; height: 25px; }.experience-nav>i { width: 15px; height: 15px; border: 1px solid #333b36; border-radius: 5px; }.experience-nav>i.active { border-color: var(--green); background: rgba(91,255,177,.08); }.experience-nav>span { flex: 1; }.experience-nav .roster-avatar { width: 24px; height: 24px; }.experience-sidebar { padding: 21px 14px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.055); background: #090c0a; }.experience-sidebar>small { color: #4f5852; font-size: 5px; letter-spacing: .12em; }.experience-dept { margin-top: 10px; padding: 9px; display: grid; grid-template-columns: 27px 1fr auto; gap: 7px; align-items: center; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: #0e1310; }.experience-dept>span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 6px; color: #07110b; background: var(--green); font-size: 6px; font-weight: 800; }.experience-dept>div { display: flex; flex-direction: column; gap: 3px; }.experience-dept b { font-size: 7px; }.experience-dept small { color: #58615b; font-size: 5px; }.experience-dept>i { color: #555e58; font-size: 6px; font-style: normal; }.experience-sidebar nav { display: flex; flex-direction: column; gap: 3px; margin-top: 17px; }.experience-sidebar nav a { padding: 8px; border-radius: 6px; color: #616a64; font-size: 7px; }.experience-sidebar nav a.active { color: #d7ddd9; background: rgba(91,255,177,.07); }.experience-status { margin-top: auto; padding-top: 13px; display: flex; gap: 8px; border-top: 1px solid var(--line); }.experience-status>i { width: 5px; height: 5px; margin-top: 2px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }.experience-status>span { display: flex; flex-direction: column; gap: 3px; }.experience-status b { font-size: 6px; }.experience-status small { color: #4d5650; font-size: 5px; }
.experience-content { padding: 27px; min-width: 0; }.experience-top { display: flex; justify-content: space-between; align-items: center; }.experience-top>div { display: flex; flex-direction: column; gap: 6px; }.experience-top small { color: #59625c; font-size: 7px; }.experience-top h3 { margin: 0; font-size: 17px; }.experience-panel { display: none; margin-top: 24px; }.experience-panel.active { display: block; animation: deptPanelIn .35s ease both; } @keyframes deptPanelIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.exp-tools { display: flex; gap: 7px; }.exp-tools .fake-input { flex: 1; }.exp-tools button { padding: 0 11px; border: 1px solid var(--line); border-radius: 6px; color: #69726c; background: #0e1310; font-size: 6px; }.exp-table { margin-top: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }.exp-row { min-height: 76px; padding: 0 14px; display: grid; grid-template-columns: 1.25fr .75fr .75fr .8fr 20px; gap: 8px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.055); color: #7f8882; font-size: 7px; }.exp-row:last-child { border-bottom: 0; }.exp-row>span:first-child { display: flex; align-items: center; gap: 8px; color: #cbd2ce; }.exp-row>span:nth-child(4) { display: flex; align-items: center; gap: 7px; }.exp-row>span:last-child { color: #4d5650; }.exp-head { min-height: 35px; color: #4c554f; background: #0e1310; font-size: 5px; }.exp-head>span:first-child { color: #4c554f; }.sparkline { width: 50px; height: 20px; display: block; background: linear-gradient(135deg,transparent 35%,var(--green) 36%,var(--green) 39%,transparent 40%,transparent 48%,var(--green) 49%,var(--green) 52%,transparent 53%,transparent 60%,var(--green) 61%,var(--green) 64%,transparent 65%); opacity: .65; }
.compose-shout { padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #0e1310; }.compose-shout>div:first-child { display: flex; align-items: center; gap: 9px; }.compose-shout>div:first-child>div { display: flex; flex-direction: column; gap: 3px; }.compose-shout small { color: #59625c; font-size: 5px; }.compose-shout b { font-size: 7px; }.compose-shout textarea { width: 100%; height: 100px; margin: 15px 0 10px; padding: 13px; resize: none; border: 1px solid var(--line); border-radius: 7px; outline: 0; color: #c9d1cc; background: #090d0a; font: inherit; font-size: 8px; }.compose-shout textarea:focus { border-color: rgba(91,255,177,.35); }.compose-shout>div:last-child { display: flex; justify-content: space-between; align-items: center; }.compose-shout>div:last-child span { color: #65706a; font-size: 6px; }.compose-shout button { padding: 8px 10px; border: 0; border-radius: 6px; color: #07110b; background: var(--green); font-size: 6px; font-weight: 750; }.mini-shout { margin-top: 11px; padding: 15px; display: grid; grid-template-columns: 27px 1fr auto; gap: 10px; border: 1px solid var(--line); border-radius: 9px; }.mini-shout>div { display: flex; flex-direction: column; gap: 5px; }.mini-shout b { font-size: 8px; }.mini-shout p { margin: 0; color: #78817b; font-size: 7px; }.mini-shout small { color: #4e5751; font-size: 5px; }.mini-shout>em { color: #4e5751; font-size: 6px; font-style: normal; }
.mini-dispatch { height: 405px; display: grid; grid-template-columns: 1.4fr .8fr; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; }.mini-map { position: relative; overflow: hidden; border-right: 1px solid var(--line); background: #080d0a; }.mini-unit { position: absolute; padding: 6px 7px; border: 1px solid rgba(91,255,177,.25); border-radius: 5px; color: var(--green); background: #0f1712; font-size: 6px; font-weight: 750; }.u-a { top: 23%; left: 20%; }.u-b { bottom: 24%; right: 22%; }.u-c { top: 48%; left: 54%; color: var(--coral); border-color: rgba(255,127,115,.25); }.calls-list { padding: 15px; }.calls-head { display: flex; justify-content: space-between; margin-bottom: 11px; }.calls-head b { font-size: 8px; }.calls-head span { color: var(--coral); font-size: 6px; }.calls-list article { padding: 12px 0; display: grid; grid-template-columns: 23px 1fr auto; gap: 8px; align-items: center; border-top: 1px solid var(--line); }.calls-list article>em { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 6px; color: var(--coral); background: rgba(255,127,115,.08); font-size: 6px; font-style: normal; font-weight: 800; }.calls-list article>em.p2 { color: var(--amber); background: rgba(255,199,102,.08); }.calls-list article>em.p3 { color: var(--green); background: rgba(91,255,177,.08); }.calls-list article>div { display: flex; flex-direction: column; gap: 4px; }.calls-list article b { font-size: 7px; }.calls-list article small { color: #555e58; font-size: 5px; }.calls-list article>span { color: #505953; font-size: 8px; }
.insight-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.insight-metrics>div { padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #0e1310; }.insight-metrics small { display: block; color: #606963; font-size: 6px; }.insight-metrics strong { display: inline-block; margin: 11px 8px 0 0; font-size: 19px; }.insight-metrics em { color: var(--green); font-size: 6px; font-style: normal; }.insight-chart { margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 9px; background: #0e1310; }.insight-chart>div { display: flex; justify-content: space-between; }.insight-chart b { font-size: 8px; }.insight-chart span { color: #616a64; font-size: 6px; }.insight-chart svg { width: 100%; height: 250px; margin-top: 10px; }

.workflow-section { padding: 150px 0; }.workflow-heading { max-width: 760px; margin: 0 auto 75px; text-align: center; }.workflow-line { display: grid; grid-template-columns: 1fr 80px 1fr 80px 1fr 80px 1fr; align-items: start; }.workflow-line>article { text-align: center; }.workflow-line>article>span { color: #4c554f; font-family: monospace; font-size: 7px; }.workflow-icon { width: 58px; height: 58px; margin: 18px auto 20px; display: grid; place-items: center; border: 1px solid rgba(91,255,177,.17); border-radius: 15px; color: var(--green); background: rgba(91,255,177,.055); font-size: 21px; box-shadow: 0 0 30px rgba(91,255,177,.04); }.workflow-line h3 { margin: 0 0 10px; font-size: 15px; }.workflow-line p { margin: 0; color: #707973; font-size: 10px; line-height: 1.6; }.workflow-line>i { height: 1px; margin-top: 53px; background: linear-gradient(90deg,rgba(91,255,177,.08),rgba(91,255,177,.35),rgba(91,255,177,.08)); }

.integration-band { padding: 100px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: radial-gradient(circle at 78% 50%,rgba(91,255,177,.08),transparent 35%),#070a08; }.integration-inner { min-height: 400px; display: grid; grid-template-columns: .85fr 1fr; gap: 70px; align-items: center; }.integration-inner>div:first-child { max-width: 530px; }.integration-inner h2 { font-size: 49px; }.integration-inner>div:first-child>p:last-child { margin: 20px 0 0; color: #818a84; font-size: 13px; line-height: 1.7; }.integration-orbit { position: relative; width: 430px; height: 430px; margin-left: auto; }.orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(91,255,177,.11); border-radius: 50%; transform: translate(-50%,-50%); }.ring-a { width: 270px; height: 270px; }.ring-b { width: 410px; height: 410px; }.integration-core,.integration-node { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.12); color: #cbd4ce; background: #101612; box-shadow: 0 16px 35px rgba(0,0,0,.35); }.integration-core { top: 50%; left: 50%; width: 78px; height: 78px; transform: translate(-50%,-50%); border-color: rgba(91,255,177,.3); border-radius: 22px; color: #07110b; background: var(--green); font-size: 28px; font-weight: 850; box-shadow: 0 0 50px rgba(91,255,177,.22); }.integration-node { width: 48px; height: 48px; border-radius: 14px; font-size: 13px; }.node-discord { top: 30px; left: 50%; transform: translateX(-50%); color: #a99cff; }.node-game { top: 50%; right: 22px; transform: translateY(-50%); color: #fff; }.node-web { bottom: 27px; left: 50%; transform: translateX(-50%); color: var(--dept-blue); }.node-api { top: 50%; left: 21px; transform: translateY(-50%); color: var(--amber); }.department-cta { padding-top: 120px; }

@media (max-width: 1100px) {
  .department-hero-ui { width: 950px; }.dept-app-frame { grid-template-columns: 180px 1fr; }.floating-shift-card { left: 10px; }.floating-signal-card { right: 5px; }.roster-visual { width: 54%; }.feature-copy { max-width: 390px; }.experience-stage { grid-template-columns: 48px 150px 1fr; }.integration-inner { gap: 30px; }
}
@media (max-width: 760px) {
  .department-hero { min-height: 900px; padding-top: 155px; }.department-hero h1 { font-size: clamp(50px,14vw,66px); }.department-hero-copy>p { font-size: 15px; }.department-proof { flex-direction: column; gap: 7px; }.department-hero-ui { width: 1050px; height: 360px; margin-top: 58px; transform: scale(.43); transform-origin: top left; }.dept-app-frame { height: 600px; }.floating-shift-card { left: 15px; bottom: -5px; }.floating-signal-card { right: 18px; }.department-stats { margin-top: 0; grid-template-columns: 1fr 1fr; }.department-stats>div { padding: 18px 0; }.department-stats>div:nth-child(2) { border-right: 0; }.department-stats>div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .department-intro { padding: 100px 0 90px; }.department-bento { grid-template-columns: 1fr; }.dept-feature-card,.roster-feature,.dispatch-feature { grid-column: auto; min-height: 620px; }.feature-copy { padding: 28px; }.feature-copy h3 { font-size: 28px; }.roster-feature .feature-copy { position: relative; top: auto; transform: none; }.roster-visual { top: 300px; right: auto; left: 25px; width: 620px; transform: scale(.58); transform-origin: top left; }.shouts-feature,.activity-feature { min-height: 570px; }.dispatch-map { top: 300px; width: 100%; height: 350px; border-top: 1px solid var(--line); border-right: 0; }.dispatch-copy { top: 0; right: auto; width: 100%; transform: none; }.dispatch-copy h3 { font-size: 30px; }.dispatch-call { left: 18px; bottom: 18px; width: 240px; }
  .department-experience { padding: 90px 0; }.experience-heading { align-items: flex-start; flex-direction: column; gap: 20px; }.experience-heading h2,.workflow-heading h2,.integration-inner h2 { font-size: 39px; }.experience-tabs { grid-template-columns: 1fr 1fr; }.experience-tab { height: 54px; border-bottom: 1px solid var(--line); }.experience-stage { width: 960px; height: 590px; grid-template-columns: 50px 170px 1fr; transform: scale(.39); transform-origin: top left; }.experience-inner { height: 850px; }.experience-heading,.experience-tabs { position: relative; z-index: 2; }
  .workflow-section { padding: 90px 0; }.workflow-heading { margin-bottom: 50px; }.workflow-line { grid-template-columns: 1fr; gap: 18px; }.workflow-line>i { width: 1px; height: 35px; margin: 0 auto; background: linear-gradient(rgba(91,255,177,.08),rgba(91,255,177,.35),rgba(91,255,177,.08)); }
  .integration-band { padding: 80px 0; }.integration-inner { min-height: 700px; grid-template-columns: 1fr; }.integration-orbit { width: 330px; height: 330px; margin: 0 auto; transform: scale(.8); }.department-cta { padding-top: 90px; }
}