/* Department tabs (accordion-style, on dark wrapper) */
    .dept-tab { border-top: 1px solid rgba(255,255,255,0.10); }
    .dept-tabs > .dept-tab:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
    .dept-row {
      width: 100%;
      padding: 16px 4px;
      background: transparent;
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      text-align: left;
      transition: color 200ms, padding 200ms;
    }
    @media (min-width: 640px) {
      .dept-row { padding: 20px 4px; gap: 16px; }
    }
    .dept-tab.is-active .dept-row { padding-bottom: 6px; }
    .dept-row .dept-name {
      font-weight: 500;
      font-size: 17px;
      color: rgba(255,255,255,0.55);
      letter-spacing: -0.01em;
      transition: color 200ms;
    }
    @media (min-width: 640px) {
      .dept-row .dept-name { font-size: 20px; }
    }
    .dept-tab:not(.is-active) .dept-row:hover .dept-name { color: #ffffff; }
    .dept-tab.is-active .dept-row .dept-name { color: #ffffff; }
    .dept-plus {
      color: rgba(255,255,255,0.55);
      font-size: 22px;
      line-height: 1;
      transition: color 200ms, opacity 200ms;
      flex-shrink: 0;
    }
    .dept-tab:not(.is-active) .dept-row:hover .dept-plus { color: #ffffff; }
    .dept-tab.is-active .dept-plus { opacity: 0; visibility: hidden; }
    .dept-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 320ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
      opacity: 0;
      color: rgba(255,255,255,0.7);
      font-size: 15px;
      line-height: 1.55;
    }
    .dept-body-inner { padding: 0 4px 20px; max-width: 28rem; }
    .dept-tab.is-active .dept-body {
      max-height: 200px;
      opacity: 1;
    }

    .hero-media {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      aspect-ratio: 4 / 3;
      background: linear-gradient(135deg, #2D2A26 0%, #4D4B48 60%, #6B7280 100%);
    }
    @media (min-width: 640px) {
      .hero-media { border-radius: 28px; aspect-ratio: 16 / 7; }
    }

    .tab-panel { display: none; }
    .tab-panel.is-active {
      display: block;
      animation: fade-in 320ms cubic-bezier(.2,.7,.2,1);
    }
    @keyframes fade-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: none; }
    }

    .t-card {
      position: relative;
      background: #ffffff;
      border-radius: 18px;
      padding: 22px;
      overflow: hidden;
      border: 1px solid #E4E4E2;
      transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms, border-color 220ms;
    }
    @media (min-width: 640px) {
      .t-card { padding: 32px; border-radius: 22px; }
    }
    .t-card:hover {
      transform: translateY(-3px);
      border-color: rgba(86,107,83,0.22);
      box-shadow: 0 22px 60px -32px rgba(36,36,36,0.22), 0 6px 16px -8px rgba(36,36,36,0.06);
    }
    .t-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      background: linear-gradient(90deg, #0000EE 0%, #4D8BFF 50%, transparent 100%);
      opacity: 0.85;
    }
    .t-logo-wrap {
      display: flex; align-items: center;
      width: 130px;
      height: 32px;
      flex: 0 0 130px;
    }
    .t-logo-wrap img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      object-position: left center;
    }
    .t-card .meta-row {
      display: flex; align-items: center; gap: 12px;
      padding-top: 18px;
      margin-top: 22px;
      border-top: 1px dashed rgba(36,36,36,0.10);
    }

    @property --dept-tint {
      syntax: '<color>';
      initial-value: rgba(0, 0, 0, 0);
      inherits: false;
    }
    .dept-wrap {
      position: relative;
      border-radius: 24px;
      background: linear-gradient(180deg, #1B1916 0%, #14110F 100%);
      color: #ffffff;
      overflow: hidden;
      padding: 36px 20px;
      --dept-tint: rgba(0, 0, 0, 0);
      transition: --dept-tint 700ms cubic-bezier(.2,.7,.2,1);
    }
    @media (min-width: 640px) {
      .dept-wrap { padding: 48px 32px; border-radius: 28px; }
    }
    .dept-wrap::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      pointer-events: none;
    }
    .dept-tint {
      position: absolute; inset: 0;
      background: radial-gradient(120% 70% at 50% 0%, var(--dept-tint) 0%, transparent 70%);
      pointer-events: none;
      border-radius: inherit;
    }
    .dept-wrap > * { position: relative; }
    @media (min-width: 1024px) {
      .dept-wrap { padding: 80px 64px; border-radius: 32px; }
    }

    .chat-stage {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      padding: 14px;
      display: flex;
      align-items: stretch;
      min-height: 380px;
    }
    @media (min-width: 640px) {
      .chat-stage { padding: 24px; border-radius: 22px; min-height: 460px; }
    }
    @media (min-width: 1024px) {
      .chat-stage { padding: 32px; border-radius: 24px; }
    }
    .chat-stage .grain {
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.14  0 0 0 0 0.14  0 0 0 0 0.14  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
      pointer-events: none;
      opacity: 0.5;
    }

    .chat-panel {
      position: relative;
      width: 100%;
      max-width: 480px;
      margin: auto;
      border-radius: 14px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      padding: 12px 12px 14px;
      color: #ffffff;
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      box-shadow: 0 24px 60px -28px rgba(0,0,0,0.4);
    }
    @media (min-width: 640px) {
      .chat-panel { padding: 18px 20px 22px; border-radius: 18px; }
    }
    .chat-panel .panel-head {
      display: flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 500;
      letter-spacing: 0.02em;
      padding-bottom: 14px;
      margin-bottom: 14px;
      border-bottom: 1px solid rgba(255,255,255,0.10);
    }
    .chat-panel .panel-head .ida-mark {
      width: 20px; height: 20px; border-radius: 6px;
      background: #ffffff;
      display: inline-grid; place-items: center;
      overflow: hidden;
      flex: 0 0 20px;
    }
    .chat-panel .panel-head .ida-mark img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .chat-panel .panel-head .live-dot {
      display: inline-block; width: 7px; height: 7px; border-radius: 999px;
      background: #10B981;
      margin-left: auto;
      animation: live-pulse 1.6s ease-in-out infinite;
    }
    @keyframes live-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.5); }
      60%      { box-shadow: 0 0 0 6px rgba(16,185,129,0); }
    }

    /* Streaming chat (bottom-up continuous stream — mirrors index hero) */
    .chat-panel { padding-bottom: 4px; }
    .chat-stream {
      position: relative;
      height: 280px;
      overflow: hidden;
      -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 12%, rgba(0,0,0,1) 30%);
              mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 12%, rgba(0,0,0,1) 30%);
    }
    @media (min-width: 640px) {
      .chat-stream { height: 360px; }
    }
    .chat-stream-inner {
      position: absolute; inset: 0;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding-bottom: 6px;
    }
    .chat-msg {
      max-width: 88%;
      align-self: flex-start;
      max-height: 0;
      opacity: 0;
      margin-top: 0;
      overflow: hidden;
      transform: translateY(8px);
      will-change: max-height, opacity, transform, margin-top;
      transition:
        max-height 700ms cubic-bezier(.22,.61,.36,1),
        margin-top 700ms cubic-bezier(.22,.61,.36,1),
        opacity 500ms ease-out,
        transform 600ms cubic-bezier(.22,.61,.36,1);
    }
    .chat-msg.is-user { align-self: flex-end; }
    .chat-msg.is-visible {
      max-height: 220px;
      opacity: 1;
      margin-top: 12px;
      transform: translateY(0);
    }
    .chat-msg.is-fading { opacity: 0; }

    .chat-bubble {
      border-radius: 16px;
      background: rgba(20, 17, 15, 0.55);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 12px 14px;
      border: 1px solid rgba(255,255,255,0.10);
    }
    .chat-msg.is-agent .chat-bubble { border-top-left-radius: 6px; }
    .chat-msg.is-user .chat-bubble { border-top-right-radius: 6px; }

    .chat-msg .msg-head {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 6px;
      font-size: 11px;
      color: rgba(255,255,255,0.92);
      font-weight: 500;
    }
    .chat-msg .msg-av,
    .chat-msg .msg-logo {
      width: 20px; height: 20px;
      display: inline-grid; place-items: center;
      color: #fff;
      overflow: hidden; flex: 0 0 20px;
    }
    .chat-msg .msg-logo {
      border-radius: 6px;
      background: #ffffff;
    }
    .chat-msg .msg-logo img {
      width: 100%; height: 100%;
      object-fit: cover;
    }
    .chat-msg .msg-av {
      border-radius: 999px;
      background: #10B981;
    }
    .chat-msg .msg-text {
      font-size: 14px; line-height: 1.45;
      color: rgba(255,255,255,0.96);
      letter-spacing: -0.005em;
      margin: 0;
    }

    /* Typing indicator: dots and final text are grid-stacked in the same cell,
       so the bubble enters at its final height and we just crossfade the two. */
    .chat-body { display: grid; }
    .chat-body > * {
      grid-area: 1 / 1;
      transition: opacity 280ms ease-out;
    }
    .chat-body .msg-text { opacity: 0; }
    .chat-body.is-typed .typing-dots { opacity: 0; }
    .chat-body.is-typed .msg-text { opacity: 1; }
    .typing-dots {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      align-self: center;
      height: 1.25rem;
    }
    .typing-dots > span {
      width: 5px; height: 5px;
      border-radius: 9999px;
      background: rgba(255,255,255,0.75);
      animation: typing-bounce 1.1s ease-in-out infinite;
    }
    .typing-dots > span:nth-child(2) { animation-delay: .15s; }
    .typing-dots > span:nth-child(3) { animation-delay: .30s; }
    @keyframes typing-bounce {
      0%, 80%, 100% { transform: translateY(0);   opacity: .45; }
      40%           { transform: translateY(-3px); opacity: 1;   }
    }