body {padding-top: var(--header-height);}
  :root {
      --primary: #6366f1;
      --primary_hover: #4f46e5;
      --primary_light: #eef2ff;

      --accent: #ec4899;
      --accent_gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
      --dark_card: #0f172a;
      --dark_surface: #1e293b;
      --text_main: #1e293b;
      --text_muted: #64748b;
      --bg_light: #f8fafc;
      --card_bg: #ffffff;
      --border_color: #e2e8f0;
      --radius_sm: 0.5rem;
      --radius_md: 0.75rem;
      --radius_lg: 1.25rem;
      --shadow_sm: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
      --shadow_md: 0 0.625rem 1.875rem -0.3125rem rgba(0, 0, 0, 0.06);
      --shadow_lg: 0 1.25rem 2.5rem -0.625rem rgba(99, 102, 241, 0.15);
      --title_color: #0b2545;
      --text_body: #334155;
      --text_muted: #64748b;
      --accent_bar: #ee5929;
      --pill_gradient: linear-gradient(90deg, #ff7a45 0%, #f44376 100%);
      --bg_clean: #ffffff;
          --card-dark: #1A2234;
    }

/* ==========================================
       1. HERO CASE STUDY HEADER
       ========================================== */
    .cs_hero {
      background: #ffffff;
      padding: 4rem 0.5rem 3.5rem 0.5rem;
      border-bottom: 0.0625rem solid var(--border_color);
      position: relative;
      overflow: hidden;
    }

    .cs_hero::before {
      content: '';
      position: absolute;
      top: -6.25rem;
      left: -6.25rem;
      width: 25rem;
      height: 25rem;
      background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(255,255,255,0) 70%);
      pointer-events: none;
    }

    .cs_hero_grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 3.5rem;
      align-items: center;
    }

    .cs_hero_title {
      font-size: 2.75rem;
      font-weight: 800;
      color: #0f172a;
      line-height: 1.2;
      letter-spacing: -0.03em;
      /* margin-bottom: 1.25rem; */
    }

    .cs_hero_meta {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.25rem;
      margin-top: 2rem;
      padding-top: 2rem;
      border-top: 0.0625rem solid var(--border_color);
    }

    .meta_card {
      background: var(--bg_light);
      padding: 1rem 1.25rem;
      border-radius: var(--radius_md);
      border: 0.0625rem solid var(--border_color);
      display: flex;
      flex-direction: column;
      gap: 1rem;
      justify-content: space-between;
    }

    .meta_card span {
      display: block;
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--text_muted);
      letter-spacing: 0.05em;
    }

    .meta_card strong {
      font-size: 1.1rem;
      color: #002c73;
      font-weight: 700;
      line-height: 1.1;
    }
    .card_problem_title {font-size: 1.5rem;}

    .cs_hero_media {
      position: relative;
      display: flex;
      justify-content: center;
    }

    .cs_image_frame {
      position: relative;
      width: 20rem;
      height: 20rem;
      border-radius: 50%;
      padding: 0.625rem;
      background: var(--accent_gradient);
      box-shadow: var(--shadow_lg);
    }

    .cs_image_frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
      border: 0.25rem solid #ffffff;
    }

    /* ==========================================
       PROJECT OVERVIEW SECTION
       ========================================== */
    .project_overview_section {
      padding: 4.5rem 0;
      background-color: var(--bg_clean);
    }

    .overview_grid {
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 3.5rem;
      align-items: flex-start;
    }

    /* Left Column Styling */
    .overview_left {
      display: flex;
      flex-direction: column;
    }

    .accent_line {
      width: 2.25rem;
      height: 0.25rem;
      background-color: var(--accent_bar);
      border-radius: 0.125rem;
      margin-bottom: 1.25rem;
    }

    .sub_tag {
      font-size: 1rem;
      font-weight: 700;
      color: #8896ab;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 0.875rem;
    }
.section_desc{font-size: 1.1rem;}
    .overview_title {
      font-size: 2.125rem;
      font-weight: 800;
      color: var(--title_color);
      line-height: 1.25;
      letter-spacing: -0.02em;
      margin-bottom: 1rem;
      max-width: 32rem;
    }

    .meta_pill_group {
      display: flex;
      align-items: center;
      gap: 1.25rem;
      flex-wrap: wrap;
    }

    .date_pill {
      background: var(--pill_gradient);
      color: #ffffff;
      font-size: 0.8rem;
      font-weight: 800;
      letter-spacing: 0.05em;
      padding: 0.5rem 1.125rem;
      border-radius: 2rem;
      display: inline-block;
      text-transform: uppercase;
      box-shadow: 0 0.25rem 0.75rem rgba(244, 67, 118, 0.25);
    }

    .meta_info {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text_muted);
    }

    /* Right Column Styling */
    .overview_right {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
      padding-top: 2.25rem;
    }

    .overview_right img{width: 100%;}
    .overview_right p {
      font-size: 1.0625rem;
      line-height: 1.65;
      color: var(--text_body);
      font-weight: 400;
    }

    /* ==========================================
       RESPONSIVE DESIGN
       ========================================== */
    @media (max-width: 992px) {
      .overview_grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }

      .overview_right {
        padding-top: 0;
      }

      .overview_title {
        max-width: 100%;
        font-size: 1.875rem;
      }
    }

    @media (max-width: 576px) {
      .project_overview_section {
        padding: 3rem 0;
      }

      .meta_pill_group {
       
        gap: 0.75rem;
      }
    }


    /* ==========================================
     ABOUT THE CLIENT SECTION (USES EXISTING ROOT)
     ========================================== */
  .about_client_section {
    background-color: var(--bg_light);
    padding: 4.5rem 0;
  }



  /* Top Text Header */
  .about_header {
    max-width: 38rem;
    margin-bottom: 2rem;
  }



  .sub_tag {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text_muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
    display: block;
  }

  

  .about_description {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text_body);
    max-width: 42rem;
    margin-bottom: 3rem;
  }
  .text_description {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text_body);
   
    margin-bottom: 3rem;
  }

  /* 4-Card Unified Container */
  .client_info_grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: var(--card_bg);
    border-radius: var(--radius_lg);
    border: 0.0625rem solid var(--border_color);
    box-shadow: var(--shadow_sm);
    overflow: hidden;
  }

  .client_card_item {
    padding: 2.25rem 1.75rem;
    border-right: 0.0625rem solid var(--border_color);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .client_card_item:last-child {
    border-right: none;
  }

  /* Icon Badges */
  .card_icon_box {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius_md);
    background: var(--pill_gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0.25rem 0.625rem rgba(244, 67, 118, 0.2);
  }

  .card_icon_box svg {
    width: 1.375rem;
    height: 1.375rem;
    fill: currentColor;
  }

  .card_title {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--title_color);
    margin-bottom: 0.625rem;
  }

  .card_text {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text_muted);
  }

  /* ==========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */
  @media (max-width: 1024px) {
    .client_info_grid {
      grid-template-columns: repeat(2, 1fr);
    }
    
    .client_card_item {
      border-bottom: 0.0625rem solid var(--border_color);
    }

    .client_card_item:nth-child(2n) {
      border-right: none;
    }

    .client_card_item:nth-last-child(-n+2) {
      border-bottom: none;
    }
  }

  @media (max-width: 576px) {
    .about_client_section {
      padding: 3rem 0;
    }

    .about_title {
      font-size: 1.75rem;
    }

    .client_info_grid {
      grid-template-columns: 1fr;
    }

    .client_card_item {
      border-right: none;
      border-bottom: 0.0625rem solid var(--border_color);
    }

    .client_card_item:last-child {
      border-bottom: none;
    }
  }


  /* ==========================================
     THE PROBLEM SECTION (USES EXISTING ROOT)
     ========================================== */
  .problem_section {
    padding: 4.5rem 0;
    background-color: var(--bg_clean);
  }

 
  /* Header Layout */
  .problem_header_grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3.5rem;
    align-items: flex-start;
    margin-bottom: 3rem;
  }

  .problem_left {
    display: flex;
    flex-direction: column;
  }



  .sub_tag {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text_muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
    display: block;
  }

  
  

  .problem_right p {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text_body);
    margin-top: 2.25rem;
  }

  /* 3 Blue Cards Grid */
  .problem_cards_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .problem_card {
    background-color: #2563eb; /* Vibrant Blue matching image */
    border-radius: var(--radius_lg);
    padding: 2.25rem 2rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--shadow_sm);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .problem_card:hover {
    transform: translateY(-0.25rem);
    box-shadow: var(--shadow_md);
  }

  /* Icon Container inside Blue Card */
  .problem_icon_box {
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .problem_icon_box svg {
    width: 2.25rem;
    height: 2.25rem;
  }


  
  .card_problem_text {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
  }

  /* ==========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */
  @media (max-width: 992px) {
    .problem_header_grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .problem_right p {
      margin-top: 0;
    }

    .problem_cards_grid {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 576px) {
    .problem_section {
      padding: 3rem 0;
    }

    .problem_title {
      font-size: 1.75rem;
    }

    .problem_card {
      padding: 1.75rem 1.5rem;
    }
  }

   /* ==========================================
       4. STRATEGY ROADMAP (NUMBERED TIMELINE)
       ========================================== */
    .cs_strategy {
      padding: 4.5rem 0;
          background-color: var(--bg_light);
    }

    .step_list {
      display: flex;
     
      gap: 1.25rem;
   
         flex-wrap: wrap;
    justify-content: center;
    }

    .step_item {
      display: flex;
      gap: 1.75rem;
          width: calc(50% - 1rem);
      background: var(--card_bg);
      padding: 1.75rem 2rem;
      border-radius: var(--radius_lg);
      border: 0.0625rem solid var(--border_color);
      box-shadow: var(--shadow_sm);
      align-items: flex-start;
      transition: border-color 0.2s;
    }

    .step_item:hover {
      border-color: var(--primary);
    }

    .step_number {
      font-size: 1.75rem;
      font-weight: 800;
      color: var(--primary);
      background: var(--primary_light);
      width: 3.5rem;
      height: 3.5rem;
      border-radius: var(--radius_md);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .step_content h3 {
      font-size: 1.125rem;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 0.375rem;
    }

    .step_content p {
      font-size: 1rem;
      color: var(--text_muted);
    }




    /* ==========================================
     STACK SECTION (USES EXISTING ROOT VARIABLES)
     ========================================== */
  .stack_section {
    padding: 4.5rem 0;
   
  }



  /* Section Header */
  .stack_header {
    max-width: 38rem;
    margin-bottom: 3rem;
  }



  .sub_tag {
    font-size:1rem;
    font-weight: 700;
    color: var(--text_muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
    display: block;
  }



  /* 5-Column Tech Stack Grid */
  .stack_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.25rem;
  }
    .stack_grid.four {  grid-template-columns: repeat(4, 1fr);}
    .stack_grid.three {  grid-template-columns: repeat(3, 1fr);}
    .everyone_case_study li {padding-left: 1.5rem; position: relative;    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text_body);}
     .everyone_case_study li:not(:last-child) {margin-bottom: 0.5rem;}
    .everyone_case_study li::before {content: ''; display: inline-block; height: 8px;width: 8px;
       position: absolute; top: 9px; left: 0; background-color: var(--text_body); border-radius: 30px;}

  .stack_card {
    background-color: var(--card_bg);
    border: 0.0625rem solid var(--border_color);
    border-radius: var(--radius_lg);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--shadow_sm);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }

  /* Glowing Top Accent Line on Hover */
  .stack_card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.25rem;
    background: var(--accent_gradient);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .stack_card:hover {
    transform: translateY(-0.375rem);
    box-shadow: var(--shadow_md);
    border-color: rgba(99, 102, 241, 0.25);
  }

  .stack_card:hover::before {
    opacity: 1;
  }

  /* Custom Vector Icon Badge */
  .stack_icon_box {
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius_md);
    background-color: var(--primary_light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
  }

  .stack_icon_box svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: currentColor;
  }

  .stack_card:hover .stack_icon_box {
    background-color: var(--primary);
    color: #ffffff;
    transform: scale(1.05);
  }

  .stack_card_title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--title_color);
    margin-bottom: 0.625rem;
    line-height: 1.3;
  }

  .stack_card_desc {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text_muted);
  }

  /* ==========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */
  @media (max-width: 1088px) {
    .stack_grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 768px) {
    .stack_grid, .stack_grid.four {
      grid-template-columns: repeat(2, 1fr);
    }
    
  }

  @media (max-width: 512px) {
    .stack_section {
      padding: 3rem 0;
    }

 


  }


  /* SEO GROWTH SECTION */
  .seo_growth_section {
    padding: 4.5rem 0;
    background-color: var(--bg_light);
  }

  .seo_description {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text_body);
    max-width: 42rem;
    margin: 1.5rem 0 3rem 0;
  }

  /* Metric Cards Grid */
  .metrics_grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
  }

  .metric_card {
    padding: 2.5rem;
    border-radius: var(--radius_lg);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .metric_card.dark { background-color: var(--dark_card); }
  .metric_card.blue { background-color: var(--primary); }

  .metric_label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
  }

  .metric_value {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
  }

  .metric_subtext {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .badge {
    background: rgba(255,255,255,0.2);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius_sm);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
    width: fit-content;
  }

  /* Comparison Bar Container */
  .comparison_container {
    background-color: var(--dark_card);
    padding: 2.5rem;
    border-radius: var(--radius_lg);
    color: #ffffff;
  }

  .comparison_header {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text_muted);
    text-transform: uppercase;
    margin-bottom: 2rem;
  }

  .chart_row {
    margin-bottom: 2rem;
  }

  .chart_row_header {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .progress_track {
    height: 0.5rem;
    background: rgba(255,255,255,0.1);
    border-radius: 1rem;
    position: relative;
  }

  .progress_fill {
    height: 100%;
    background: var(--primary);
    border-radius: 1rem;
  }

  /* Responsive */
  @media (max-width: 992px) {
    .metrics_grid { grid-template-columns: 1fr; }
    .arrow_divider { display: none; }
  }

  


.chart_wrap { background: var(--card-dark); border-radius: 20px; padding: 3rem; border: 1px solid rgba(245, 197, 24, 0.1); }
.chart_header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; flex-wrap: wrap; gap: 20px; 
color: var(--bg_clean);
}
.chart_title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 6px;
}

.chart_legend {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.legend_item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
}
.legend_dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.legend_dot.before {
    background: rgba(255, 255, 255, 0.2);
}
.legend_dot.after {
    background: linear-gradient(90deg, hsla(23, 99%, 63%, 1) 0%, hsla(343, 88%, 67%, 1) 100%);
}
.chart-bottom-stats {
    display: flex;
    gap: 12px;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.cbs-num {font-size: 2.5rem;}
.cbs-sub {    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);}
.cbs-card {
    border-radius: 10px;
    padding: 16px 24px;
    flex: 1;
    min-width: 160px;
}






/* ==========================================
     SEO RESULTS KEYWORD SECTION
     ========================================== */
  .seo_keywords_section {
    padding: 4.5rem 0;
    background-color: var(--bg_clean);
  }

  .seo_intro_text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text_body);
    max-width: 44rem;
    margin: 1.5rem 0 3rem 0;
  }

  /* Metric Stat Summary Cards */
  .stats_summary_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3.5rem;
  }

  .stat_summary_card {
    padding: 2rem 1.5rem;
    border-radius: var(--radius_md);
    text-align: center;
    border: 0.0625rem solid transparent;
  }

  .stat_summary_card.gold {
    background-color: #fefcbf;
    border-color: #fef08a;
    color: #713f12;
  }

  .stat_summary_card.green {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
  }

  .stat_summary_card.red {
    background-color: #fef2f2;
    border-color: #fee2e2;
    color: #991b1b;
  }
  .stat_summary_card.blue {
      background-color: #002c731c;
    border-color: #002c736e;
    color: #002c73;
  }
  .stat_summary_card.orange {
         background-color: #fe6b0b1a;
    border-color: #fe6b0b57;
    color: #fe6b0b;
  }
  .stat_summary_card.pink {
            background-color: #fe0bd817;
    border-color: #fe0bd840;
    color: #fe0bd8a8;
  }

  .stat_card_num {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
  }

  .stat_card_label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.8;
  }

  /* Data Table Container Styling */
  .table_wrapper {
    background-color: var(--card_bg);
    border: 0.0625rem solid var(--border_color);
    border-radius: var(--radius_lg);
    box-shadow: var(--shadow_sm);
    overflow: hidden;
  }
  .traffic_growth {    background-color: var(--bg_light);}
.custom_table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    min-width: 40rem;
}
  .custom_table th {
      background: #f1f5f9;
      padding: 1rem 1.5rem;
      font-size: 0.95rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--text_muted);
      letter-spacing: 0.05em;
    }

    .custom_table td {
      padding: 1.125rem 1.5rem;
      border-bottom: 0.0625rem solid var(--border_color);
      font-size: 1rem;
      color: #334155;
    }

    .custom_table tr:last-child td {
      border-bottom: none;
    }

  /* .keyword_table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }

  .keyword_table th {
    background: var(--pill_gradient);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1.125rem 1.5rem;
  }

  .keyword_table td {
    padding: 1rem 1.5rem;
    font-size: 0.9375rem;
    color: var(--text_main);
    border-bottom: 0.0625rem solid var(--border_color);
    vertical-align: middle;
  }

  .keyword_table tr:last-child td {
    border-bottom: none;
  }

  .keyword_table tr:hover td {
    background-color: var(--bg_light);
  } */

  /* Ranking Badges */
  .rank_badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    width: fit-content;
  }

  .rank_badge.top_one { background-color: #fef08a; color: #854d0e; }
  .rank_badge.top_three { background-color: #dcfce7; color: #166534; }
    .rank_badge.top_four {    background-color: #7a789e4d;
    color: #4613d1b8; }
  .rank_badge.top_five { background-color: #e0f2fe; color: #0369a1; }
    .rank_badge.top_six {       background-color: #ceb4acc4;
    color: #924646 }
    .rank_badge.top_seven {         background-color: #002c73bf;
    color: #fff;}
  .rank_badge.top_ten { background-color: #fef3c7; color: #d97706; }

  .status_muted {
    font-size: 0.875rem;
    color: var(--text_muted);
    font-weight: 500;
  }

  .rank_distribution_box {    margin-top: 1.5rem;
    background: var(--white);
    border-radius: 14px;
    padding: 1.3rem 2rem;
    border: 1px solid var(--secondary-color);}
     .rank_distribution_box .head {font-size: 1.2rem; font-weight: 500; margin-bottom: 1rem;}
     .rank_distribution_grid {display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;}
     .rank_distribution_grid.five { grid-template-columns: repeat(5, 1fr);}

  /* Width Column Allocations */
  .col_index { width: 10%; }
  .col_phrase { width: 40%; font-weight: 700; }
  .col_now { width: 25%; }
  .col_before { width: 25%; }

  /* ==========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */
  @media (max-width: 768px) {
    .stats_summary_grid {
      gap: 1rem;
    }
    
    .table_wrapper {
      overflow-x: auto;
    }

    .keyword_table {
      min-width: 37.5rem;
    }
  }

/* ==========================================
     FRANCHISE NETWORK GROWTH SECTION (UPDATED)
     ========================================== */
  .network_growth_section {
    padding: 4.5rem 0;
    background-color: var(--bg_clean);
  }

  .growth_intro_text {
    font-size: 1.0625rem;
    line-height: 1.65;
    color: var(--text_body);
    max-width: 44rem;
    margin: 1.5rem 0 3.5rem 0;
  }

  /* Main Comparative Display Grid */
  .growth_display_grid {
    display: grid;
    grid-template-columns: 1fr auto 1.15fr;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .growth_panel {
    border-radius: var(--radius_lg);
    padding: 3rem 2.5rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: var(--shadow_md);
  }

  /* Before State Panel */
  .growth_panel.state_past {
    background-color: #1e1411; /* Sleek Dark Espresso Tone */
  }

  /* Present Scale Panel */
  .growth_panel.state_current {
    background-color: var(--primary); /* Utilizing Global Primary Blue */
  }

  .panel_timeframe_header {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0.75rem;
  }

  /* Stat Blocks inside Main Cards */
  .growth_stat_block {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .stat_value_row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .growth_number {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .growth_metric_label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
  }

  /* Small Growth Pill Badges */
  .growth_percentage_pill {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(0.25rem);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius_sm);
    letter-spacing: 0.02em;
  }

  .growth_transition_arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text_muted);
    font-size: 1.75rem;
    font-weight: 300;
  }

  /* ==========================================
     NEW BOTTOM PROGRESS DASHBOARD CARDS
     ========================================== */
  .dashboard_progress_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .progress_card_item {
    background-color: var(--card_bg);
    border: 0.0625rem solid var(--border_color);
    border-radius: var(--radius_md);
    padding: 2rem;
    box-shadow: var(--shadow_sm);
  }

  .progress_card_meta {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text_muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.25rem;
  }

  .progress_bar_row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text_main);
    margin-bottom: 0.5rem;
  }

  .progress_track_line {
    height: 0.5rem;
    background-color: var(--bg_light);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.25rem;
  }

  .progress_fill_bar {
    height: 100%;
    background-color: #e2cca9; /* Warm accent matching data representation */
    border-radius: 1rem;
  }

  .progress_summary_headline {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--title_color);
  }

  .progress_summary_headline span {
    font-size: 0.875rem;
    color: var(--text_muted);
    font-weight: 500;
  }

  /* ==========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */
  @media (max-width: 992px) {
    .growth_display_grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    .growth_transition_arrow {
      transform: rotate(90deg);
      padding: 0.5rem 0;
    }

    .dashboard_progress_grid {
      grid-template-columns: 1fr;
      gap: 1.25rem;
    }
  }

  @media (max-width: 576px) {
    .growth_panel {
      padding: 2.25rem 1.75rem;
    }
    
    .growth_number {
      font-size: 2rem;
    }
  }


.website_wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 56px; }
.wba-img {max-width: 100%;}
.wba_card {
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid transparent;
}
.wba_card.before {
    border-color: rgba(200, 155, 109, 0.3);
}
.wba_card.after {
    border-color: rgba(217, 164, 65, 0.5);
}
.wba_label_bar {padding: 12px 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 10px;}
.wba_card.before .wba_label_bar {
    background: rgba(200, 155, 109, 0.15);
    color: rgba(75, 46, 30, 0.6);
}
.wba-card.after .wba_label_bar {
    background: rgba(217, 164, 65, 0.15);

}
.wba_card.before .wba_dot{
    background: rgba(200, 155, 109, 0.5);
        width: 8px;
    height: 8px;
    border-radius: 50%;
}
.wba_caption {
    padding: 14px 20px;
    font-size: 12px;
    color: #7a6050;
    background: var(--white);
    font-weight: 500;
}
/* ==========================================
     RANK DISTRIBUTION DASHBOARD SECTION
     ========================================== */
  .rank_distribution_section {
    padding: 4.5rem 0;
    background-color: var(--bg_clean);
  }

  /* Main Container Box */
  .distribution_panel {
    background-color: var(--dark_card); /* Using your global dark card tone */
    border-radius: var(--radius_lg);
    padding: 3.5rem 3rem;
    color: #ffffff;
    box-shadow: var(--shadow_md);
  }

  /* Header inside the dark card */
  .distribution_header {
    margin-bottom: 3rem;
  }

  .distribution_title {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    margin-bottom: 0.375rem;
  }

  .distribution_subtitle {
    font-size: 0.9375rem;
    color: var(--text_muted);
    font-weight: 500;
  }

  /* Core Dashboard Content Layout split */
  .distribution_content_layout {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 3.5rem;
    align-items: center;
  }

  /* Left Graphic Holder: Drop your custom SVG straight in here */
  .chart_graphics_holder {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 14rem;
  }
  
  .chart_graphics_holder svg,
  .chart_graphics_holder img {
    width: 100%;
    height: auto;
    max-width: 14rem;
  }

  /* Right Metrics Segment Rows stack */
  .metrics_rows_stack {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .metric_data_row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.25rem;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.08);
  }

  .metric_data_row:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  /* Left information pair styling */
  .row_label_group {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Custom Legend Color Indicators */
  .legend_color_bullet {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: var(--radius_sm);
    margin-top: 0.25rem;
    flex-shrink: 0;
  }

  /* Matched colors referencing image segments */
  .bullet_rank_1 { background-color: #ff1e27; }
  .bullet_rank_2 { background-color: #cc121a; }
  .bullet_rank_3 { background-color: #7f2427; }
  .bullet_rank_4 { background-color: #40191b; }

  .label_text_main {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.125rem;
  }

  .label_text_sub {
    font-size: 0.8125rem;
    color: var(--text_muted);
    font-weight: 500;
  }

  /* Percentage Values Right aligned */
  .row_percentage_output {
    font-size: 1.875rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  /* Matching unique text color tones from the distribution image */
  .pct_rank_1 { color: #ff1e27; }
  .pct_rank_2 { color: #cc121a; }
  .pct_rank_3 { color: #7f2427; }
  .pct_rank_4 { color: #594042; }

  /* ==========================================
     RESPONSIVE BREAKPOINTS
     ========================================== */
  @media (max-width: 768rem) {
    .distribution_panel {
      padding: 2.25rem 1.75rem;
    }

    .distribution_content_layout {
      grid-template-columns: 1fr;
      gap: 2.5rem;
    }

    .chart_graphics_holder {
      min-height: auto;
    }
  }

  .common_padding {
    padding: 4.5rem 0;
}


@media(max-width:767px){
  .cs_hero_grid {    display: flex;
    flex-direction: column-reverse;}
    .cs_hero_title {    font-size: 2rem;}
    .metric_value  {    font-size: 2rem;}
    .step_item {width: 100%; flex-direction: column; gap: 1rem; padding: 1.5rem;}
    .rank_distribution_grid {    display: flex;overflow: auto;}
    .rank_distribution {min-width: 10rem;}
    .website_wrap {    grid-template-columns: repeat(1, 1fr);}
    .stack_card, .stat_summary_card{padding: 1.125rem;}
}