/* --- 1. GLOBAL VARIABLES & RESET --- */
  :root {
    --zifo-green: #78be20;
    --zifo-green-light: #bde493;
    --midnight: #0f172a;
    --midnight-light: #1e293b;
    --slate-light: #64748b;
    --bg-body: #ffffff;
    --bg-surface: #f8fafc;
    --border-subtle: #e2e8f0;
    --pill-bg: #f1f5f9;
    --header-height: 72px;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  /* Flex Container */
  .workflow-app-container { display: flex; max-width: 1440px; margin: 0 auto; background: white; border-radius: 24px; border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); position: relative; overflow: visible; min-height: 800px;}
  .app-sidebar { width: 280px; background: #f8fafc; border-right: 1px solid var(--border-subtle); border-radius: 24px; padding: 30px 24px; display: flex; flex-direction: column; flex-shrink: 0;   position: sticky; top: var(--header-height); height: calc(100vh - var(--header-height)); align-self: flex-start; overflow-y: auto;}
  .inf-filter-buttons.app-sidebar {  border-radius: 24px;  transition: border-radius 0.3s ease;  border-bottom-right-radius: 0px;  border-top-right-radius: 0px;}  
  .inf-filter-buttons.app-sidebar.no-radius {  border-top-left-radius: 0;}
  .app-nav-label { font-size: 14px; font-family: 'TT Common Bold'; line-height: 18px; font-weight: 800; color: var(--slate-light); text-transform: uppercase; letter-spacing: 1.5px; margin: 10px 0 20px 10px; }
  .nav-chain-wrapper { position: relative; display: flex; flex-direction: column; gap: 8px; }
  .app-filter-section{display:flex; align-items:center; gap:20px; flex:1;}
  .value-chain-heading.view-change{ font-size: 15px; font-family: 'TT Common Bold'; line-height:19px; font-weight: 700; color: #0f172a; margin: 0px; }
  .nav-chain-line { position: absolute; left: 24px; top: 20px; bottom: 20px; width: 2px; background: #e2e8f0; z-index: 0; }
  .app-nav-item { padding: 16px 20px; border-radius: 16px; cursor: pointer; font-family: 'TT Common Medium'; font-size: 16px; line-height: 20px; font-weight: 500; color: var(--slate-light); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; border: 1px solid transparent; }
  .nav-icon-box { width: 32px; height: 32px; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; flex-shrink: 0; color: var(--slate-light); }
  .nav-icon-box svg { width: 16px; height: 16px; stroke-width: 2.5; }
  .category-heading{border-left:4px solid #78be20; padding-left:12px; font-family: 'TT Common Bold'; font-size:18px; line-height: 22px; font-weight:800;}
  .app-nav-item:hover { color: var(--midnight); }
  .app-nav-item:hover .nav-icon-box { border-color: var(--midnight); color: var(--midnight); background: white; }
  .app-nav-item.active { background: white; color: var(--midnight); font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.02); transform: translateX(4px); }
  .app-nav-item.active .nav-icon-box { background: var(--zifo-green); border-color: var(--zifo-green); color: white; box-shadow: 0 0 0 4px rgba(120, 190, 32, 0.15); }
  .app-nav-item.active::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; background: var(--zifo-green); border-radius: 0 4px 4px 0; }
  .app-nav-item.active .nav-icon-box img{filter: brightness(0) saturate(100%) invert(98%) sepia(0%) saturate(315%) hue-rotate(213deg) brightness(116%) contrast(100%);}
  .app-main { flex: 1; display: flex; flex-direction: column; background: #fff; position: relative; border-radius: 24px;}
  .app-toolbar { padding: 20px 30px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px);border-top-right-radius: 24px; border-bottom: 1px solid var(--border-subtle); display: flex;  align-items: center; justify-content: space-between; position: sticky; top: var(--header-height); z-index: 50;}
  .app-view-title { font-size: 15px; line-height: 19px; font-family: 'TT Common Bold'; font-weight: 700; color: var(--midnight); }
  .app-filter-pills { display: flex; gap: 6px; background: var(--pill-bg); padding: 4px; border-radius: 10px; }
  .app-filter-pills button.app-pill-btn{ border: none; background: transparent; padding: 6px 14px; border-radius: 8px; font-family: 'TT Common Medium'; font-size: 14px; line-height: 18px; font-weight: 500; color: var(--slate-light); cursor: pointer; transition: all 0.2s; white-space: nowrap; }
  .app-filter-pills button.app-pill-btn:hover { color: var(--midnight); background-color: transparent; }
  .app-filter-pills button.app-pill-btn.active { background: #fff; color: var(--midnight); box-shadow: var(--shadow-sm); }
  .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; }

  /* Hidden State */
  .hidden { display: none !important;}
  .accordion-wrapper, .accordion-content { display: none;}
  .sub-stage-group.accordion-item.open .accordion-wrapper , .inf-card.open .accordion-content { display: block;}

  /* TOGGLE SWITCH */
  .expand-toggle-wrapper { display: flex; align-items: center; gap: 12px; margin-left: 20px; border-left: 1px solid var(--border-subtle); padding-left: 20px; }
  .toggle-label { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--midnight); }
  .toggle-switch { width: 40px; height: 22px; background: #e2e8f0; border-radius: 20px; position: relative; cursor: pointer; transition: background 0.3s; }
  .toggle-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: white; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
  .toggle-switch.active { background: var(--zifo-green); }
  .toggle-switch.active::after { transform: translateX(18px); }
  .app-scroll { padding: 40px; }

  /* Accordion Styles */
  .sub-stage-group { margin-bottom: 16px; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; animation: fadeUp 0.3s ease-out; background: #fff; }
  .accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #fff; border: none; font-family: 'TT Common Bold'; font-size: 13px; line-height: 17px; font-weight: 700; color: var(--midnight); text-transform: uppercase; letter-spacing: 1px; cursor: pointer; text-align: left; transition: all 0.2s; }
  .accordion-trigger:hover , .accordion-trigger:focus { background: var(--bg-surface); color: var(--midnight); }
  .accordion-icon { transition: transform 0.3s ease; color: var(--slate-light); }
  .accordion-trigger.active .accordion-icon { transform: rotate(180deg); color: var(--zifo-green); }
  .accordion-trigger.active { background: var(--bg-surface); }
  .sub-stage-group.accordion-item.open .accordion-wrapper.value-chain-block.accordion-content{ display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;}
 
  .accordion-content { overflow: hidden; background: #fff; }
  .matrix-grid-wrapper { padding: 24px; border-top: 1px solid var(--border-subtle); }
  .matrix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
  .matrix-card { background: #fff; border: 1px solid var(--border-subtle); border-radius: 8px; padding: 12px 16px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: default; display: flex; align-items: center; position: relative; overflow: hidden; }
  .matrix-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #cbd5e1; }
  .matrix-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
  .matrix-card.informatics::before { background: #10b981; } .matrix-card.data::before { background: #8b5cf6; } .matrix-card.specialist::before { background: #0ea5e9; }
  .matrix-card-title { font-size: 14px; font-family: 'TT Common Regular'; font-weight: 500; color: var(--midnight); margin-left: 10px; line-height: 18px; }

  /* Tech Foundation */
  .tech-foundation { max-width: 1400px; margin: 40px auto 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
  .tf-card { background: #fff; border-radius: 20px; padding: 30px; position: relative; box-shadow: 0 4px 20px rgba(0,0,0,0.05), 0 0 0 1px var(--border-subtle); transition: transform 0.3s ease, box-shadow 0.3s ease; overflow: hidden; }
  .tf-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(120, 190, 32, 0.15); }
  .tf-card::after { content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 2px; background: linear-gradient(135deg, var(--zifo-green), #a3e635); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.3s ease; }
  .tf-card:hover::after { opacity: 0.5; }
  .tf-card-header { font-size: 16px; line-height: 20px; font-family: 'TT Common Bold'; font-weight: 800; color: var(--midnight); margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border-subtle); }
  .tf-tags { display: flex; flex-wrap: wrap; gap: 10px; }
  .tf-tag { background: transparent; color: var(--midnight); border: 1px solid var(--border-subtle); padding: 8px 16px; border-radius: 50px; font-family: 'TT Common Bold'; font-size: 12px; line-height: 16px; font-weight: 600; transition: all 0.2s; }
  .tf-tag:hover { background: var(--bg-surface); border-color: var(--zifo-green); color: #166534; transform: scale(1.05); }

  /* Case Files */
  .case-section { padding: 100px 40px; background: white; }
  .case-header-title { font-family: 'TT Common Bold'; font-size: 14px; line-height: 18px; text-align: center; margin-bottom: 60px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: var(--slate-light); }
  .case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
  .case-card { background: #f8fafc; padding: 50px; border-radius: 24px; position: relative; transition: all 0.4s ease; cursor: pointer; border: 1px solid transparent; }
  .case-card:hover { background: white; box-shadow: 0 20px 40px -10px rgba(0,0,0,0.08); border-color: var(--border-subtle); }
  .case-tag { font-family: 'TT Common Bold'; font-size: 10px; line-height: 14px; font-weight: 800; color: var(--zifo-green); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 24px; display: block; background: white; padding: 4px 8px; border-radius: 4px; width: fit-content; box-shadow: var(--shadow-sm); }
  .case-title { font-family: 'TT Common Bold'; font-size: 24px; line-height: 28px; font-weight: 800; color: var(--midnight); line-height: 1.3; max-width: 90%; letter-spacing: -0.5px; }
  .case-action { position: absolute; bottom: 50px; right: 50px; width: 48px; height: 48px; background: var(--midnight); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; opacity: 0; transform: translateX(-20px); transition: all 0.3s ease; }
  .case-card:hover .case-action { opacity: 1; transform: translateX(0); }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes pulse { 0% { opacity: 0.5; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0.5; transform: scale(0.9); } }


  @media (max-width: 1200px) {

    .app-filter-pills { width: 100%; flex-wrap: nowrap; overflow-x: auto;  justify-content: flex-start; -ms-overflow-style: none; scrollbar-width: none; }
    .app-filter-pills::-webkit-scrollbar { display: none; }
    .value-chain-heading{width: 100%;}
    .app-filter-section{gap: 0px;}
    .expand-toggle-wrapper{margin: 0px;}
    .app-toolbar{padding: 20px;}
  }

  /* Mobile Fixes */
  @media (max-width: 991px) {
    
    /* Mobile sidebar is NOT sticky */
     .app-filter-section{width: 100%;}
    .workflow-app-container { flex-direction: column; height: auto; display: block; }
    .app-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 15px; position: relative; top: 0; }
    .inf-filter-buttons.app-sidebar{border-bottom-left-radius: 0px; border-top-right-radius:24px; border-bottom-right-radius: 0px;}
    .nav-chain-line { display: none; }
    .app-scroll { padding: 20px; }
    .app-filter-pills{width: 500px;}
    .app-toolbar { flex-direction: column; gap: 15px; align-items: flex-start; position: sticky; top: var(--header-height); }
    .app-pill-btn { flex-shrink: 0; }
    .expand-toggle-wrapper { margin-left: 0; padding-left: 0; border-left: none; width: 100%; justify-content: space-between; border-top: 1px solid var(--border-subtle); padding-top: 10px; }
    .value-chain-heading.view-change{margin:0px 0px 15px;}
    .tech-foundation { padding: 20px; }
    .tf-card { padding: 20px; }
    .case-grid { grid-template-columns: 1fr; }
    .case-card { padding: 30px; }
   
  }

    @media (max-width: 767px) {
        .app-filter-section{flex-direction: column; align-items: flex-start;}
        .app-filter-pills{width: 400px;}
    }

       @media (max-width: 551px) {
        .app-filter-pills{width: 350px;}
    }

    
       @media (max-width: 480px) {
        .app-filter-pills{width: 200px;}
    }