/* ====================== CRITICAL RENDER PATH - SUB-1-SECOND PAINT ====================== */
    @font-face {
        font-family: 'Inter';
        src: url('/assets/fonts/inter-v19-latin-regular.woff2') format('woff2');
        font-display: swap;
        font-weight: 400;
      }
      
      @font-face {
        font-family: 'Inter';
        src: url('/assets/fonts/inter-v19-latin-700.woff2') format('woff2');
        font-display: swap;
        font-weight: 700;
      }
  
      /* Critical variables for immediate paint */
      :root {
        --hc-yellow: #fec01c;
        --strategic-accent: #c89600;
        --premium-dark: #18181b;
        --text-primary: #18181b;
        --text-secondary: #52525b;
        --cloud-gray: #f7f7f9;
        
        /* Enhanced spacing system from blueprint */
        --space-1: 0.5rem;
        --space-2: 1rem;
        --space-3: 1.5rem;
        --space-4: 2rem;
        --space-5: 2.5rem;
        --space-6: 3rem;
        --space-8: 4rem;
        --space-12: 6rem;
        --space-16: 8rem;
        
        /* Typography hierarchy - Mathematical perfection */
        --text-xs: 0.875rem;
        --text-sm: 0.95rem;
        --text-base: 1.07rem;
        --text-lg: 1.25rem;
        --text-xl: 1.5rem;
        --text-2xl: 2rem;
        --text-3xl: 2.5rem;
        --text-4xl: 3rem;
        --text-5xl: 4rem;
        --text-6xl: 5rem;
        
        /* Premium shadows */
        --card-shadow: 0 2px 24px rgba(40,46,60,0.07);
        --card-shadow-hover: 0 8px 40px rgba(254,192,28,0.15);
        --card-shadow-hero: 0 16px 70px rgba(254,192,28,0.25);
        --card-shadow-premium: 0 12px 50px rgba(40,46,60,0.12);
        --case-study-shadow: 0 20px 80px rgba(254,192,28,0.3);
        
        /* Animation timings - Apple sophistication */
        --transition-fast: 0.15s ease-out;
        --transition-medium: 0.25s ease-out;
        --transition-slow: 0.4s ease-out;
      }
  
      /* Critical reset and base - immediate visibility */
      *, *::before, *::after {
        box-sizing: border-box;
      }
  
      html, body {
        margin: 0;
        padding: 0;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
        color: var(--text-primary);
        font-size: var(--text-base);
        line-height: 1.6;
        background: #fff;
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
  
      /* Critical text visibility for sub-1s paint */
      .critical-text {
        visibility: visible !important;
        opacity: 1 !important;
      }
  
      .font-loading * {
        visibility: hidden;
      }
  
      .font-loading .critical-text {
        visibility: visible;
      }
      /* ====================== POST-CRITICAL CSS - LOADED AFTER FIRST PAINT ====================== */
      
      /* Premium animations - Apple level sophistication */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
  
      @keyframes premiumReveal {
        from {
          opacity: 0;
          transform: translateY(40px) scale(0.98);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
  
      @keyframes scaleIn {
        from {
          opacity: 0;
          transform: scale(0.95);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
  
      @keyframes shimmer {
        0% { background-position: -200px 0; }
        100% { background-position: calc(200px + 100%) 0; }
      }
  
      @keyframes subtleFloat {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-8px); }
      }
  
      /* ====================== HEADER & NAVIGATION - INHERITED FROM ARTICLES PAGE ====================== */
      .logo-header-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: var(--space-4);
        margin-bottom: var(--space-2);
        animation: fadeInUp 0.6s ease-out;
      }
  
      .logo-img {
        width: auto;
        height: 60px;
        margin-bottom: 0.7rem;
        display: block;
        transition: transform var(--transition-fast);
      }
  
      .logo-img:hover {
        transform: scale(1.05);
      }
  
      .site-title-text {
        font-size: var(--text-2xl);
        font-weight: 700;
        color: #222;
        margin: 0 0 1.2rem 0;
        letter-spacing: -0.01em;
        text-align: center;
        line-height: 1.1;
        text-shadow: 0 1px 2px rgba(0,0,0,0.05);
      }
  
      .nav-shell {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--space-5);
        width: 100%;
        margin-bottom: var(--space-5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
      }
  
      .nav-link-paint {
        color: #18181b;
        text-decoration: none;
        font-size: 1.11rem;
        font-weight: 500;
        padding: 0.46em 1.24em;
        border-radius: 1.2em;
        position: relative;
        background: none;
        transition: all var(--transition-medium);
        border: none;
        background: linear-gradient(135deg, transparent 0%, rgba(254,192,28,0.02) 100%);
      }
  
      .nav-link-paint:hover,
      .nav-link-paint:focus {
        color: #fec01c;
        background: linear-gradient(135deg, #fffde5 0%, #fffbe6 100%);
        outline: none;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(254,192,28,0.15);
      }
  
      .nav-link-paint.active,
      .nav-link-paint[aria-current="page"] {
        color: #fec01c;
        background: linear-gradient(135deg, #fffbe6 0%, #fff8d6 100%);
        font-weight: 700;
        box-shadow: 0 2px 18px rgba(254,192,28,0.08);
        animation: scaleIn 0.3s ease-out;
      }
  
      @media (max-width: 900px) {
        .logo-header-wrap {
          margin-top: var(--space-2);
          margin-bottom: var(--space-1);
        }
        .site-title-text {
          font-size: 1.23rem;
          margin-bottom: 0.65rem;
        }
        .nav-shell {
          gap: var(--space-3);
          margin-bottom: var(--space-3);
        }
      }
  
      /* ====================== MOBILE NAVIGATION ====================== */
      .hamburger {
        display: none; flex-direction: column; width: 40px; height: 40px;
        justify-content: center; align-items: center; cursor: pointer;
        padding: var(--space-1);
        border-radius: 8px;
        transition: background-color var(--transition-fast);
      }
  
      .hamburger:hover {
        background-color: rgba(254,192,28,0.1);
      }
  
      .hamburger-icon {
        width: 27px; height: 3px; background: #333;
        margin: 4px 0; border-radius: 2px; 
        transition: all var(--transition-medium);
      }
  
      @media (max-width: 800px) {
        .nav-shell {
          display: none; flex-direction: column; align-items: flex-start;
          background: rgba(255,255,255,0.95); 
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          width: 100vw; position: absolute; top: 85px; left: 0;
          padding: 1.2rem 0 1.2rem 2rem; z-index: 50; 
          border-bottom: 1px solid #eee;
          transform: translateY(-10px);
          opacity: 0;
          transition: all var(--transition-medium);
        }
        .nav-shell.open { 
          display: flex; 
          transform: translateY(0);
          opacity: 1;
        }
        .hamburger { display: flex; margin: 0 auto 1rem auto; }
        .logo-header-wrap { margin-top: 1.2rem; }
      }
  
      /* ====================== HERO SECTION - ANTI-BS AUTHORITY ====================== */
      .hero-section {
        min-height: 80vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
        position: relative;
        overflow: hidden;
        padding: var(--space-8) var(--space-4);
        margin-top: 0;
      }
  
      .hero-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 80%;
        height: 200%;
        background: radial-gradient(circle, rgba(254,192,28,0.03) 0%, transparent 70%);
        animation: subtleFloat 20s ease-in-out infinite;
      }
  
      .hero-container {
        max-width: 1400px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: var(--space-8);
        align-items: center;
        position: relative;
        z-index: 2;
      }
  
      .hero-content {
        animation: premiumReveal 1s ease-out;
      }
  
      .hero-badge {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        color: #fff;
        font-size: var(--text-sm);
        font-weight: 700;
        padding: 0.6em 1.4em;
        border-radius: 50px;
        margin-bottom: var(--space-4);
        box-shadow: 0 4px 20px rgba(254,192,28,0.3);
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
  
      .hero-headline {
        font-size: clamp(2.5rem, 6vw, var(--text-5xl));
        font-weight: 700;
        line-height: 1.1;
        margin: 0 0 var(--space-4) 0;
        color: var(--text-primary);
        letter-spacing: -0.02em;
        text-shadow: 0 2px 4px rgba(0,0,0,0.05);
      }
  
      .hero-subheadline {
        font-size: var(--text-xl);
        color: var(--text-secondary);
        margin: 0 0 var(--space-6) 0;
        line-height: 1.4;
        font-weight: 400;
        max-width: 600px;
      }
  
      .hero-cta {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        color: #fff;
        text-decoration: none;
        font-size: var(--text-lg);
        font-weight: 700;
        padding: 1em 2.5em;
        border-radius: 50px;
        box-shadow: var(--card-shadow-hero);
        transition: all var(--transition-medium);
        border: none;
        cursor: pointer;
      }
  
      .hero-cta:hover,
      .hero-cta:focus {
        transform: translateY(-3px);
        box-shadow: 0 20px 80px rgba(254,192,28,0.4);
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      }
  
      .hero-visual {
        display: flex;
        align-items: center;
        justify-content: center;
        animation: premiumReveal 1s ease-out 0.3s both;
      }
  
      .hero-visual svg {
        width: 100%;
        height: 400px;
        filter: drop-shadow(0 10px 40px rgba(254,192,28,0.2));
      }
  
      @media (max-width: 1100px) {
        .hero-container {
          grid-template-columns: 1fr;
          text-align: center;
          gap: var(--space-6);
        }
        
        .hero-visual {
          order: -1;
        }
        
        .hero-visual svg {
          height: 300px;
        }
      }
  
      /* ====================== ADVANCED FILTERING SECTION ====================== */
      .case-studies-filter-section {
        max-width: 1400px;
        margin: 0 auto var(--space-6) auto;
        padding: 0 var(--space-4);
        animation: fadeInUp 0.8s ease-out 0.6s both;
      }
  
      .filter-container {
        background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
        border-radius: 24px;
        padding: var(--space-5);
        box-shadow: var(--card-shadow-premium);
        border: 1px solid rgba(254,192,28,0.1);
        margin-bottom: var(--space-4);
      }
  
      .filter-row {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
        align-items: center;
        margin-bottom: var(--space-4);
      }
  
      .filter-row:last-child {
        margin-bottom: 0;
      }
  
      .search-container {
        position: relative;
        flex: 1 1 300px;
        min-width: 280px;
        max-width: 500px;
      }
  
      .case-studies-search {
        width: 100%;
        padding: 1em 1.4em 1em 3.5em;
        border: 2px solid rgba(254,192,28,0.3);
        border-radius: 50px;
        font-size: var(--text-base);
        outline: none;
        background: #fff;
        transition: all var(--transition-fast);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
      }
  
      .search-icon {
        position: absolute;
        left: 1.2em;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        pointer-events: none;
      }
  
      .case-studies-search:focus {
        border-color: #fec01c;
        box-shadow: 
          inset 0 1px 3px rgba(0,0,0,0.05),
          0 0 0 3px rgba(254,192,28,0.2);
      }
  
      .filter-categories, .solution-filters {
        display: flex;
        gap: 0.8em;
        flex-wrap: wrap;
        align-items: center;
      }
  
      .category-filter, .solution-filter {
        background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
        color: #555;
        border: 2px solid #e5e7eb;
        border-radius: 25px;
        padding: 0.7em 1.4em;
        font-weight: 600;
        font-size: var(--text-sm);
        cursor: pointer;
        transition: all var(--transition-fast);
        text-decoration: none;
      }
  
      .category-filter:hover,
      .category-filter.active,
      .solution-filter:hover,
      .solution-filter.active {
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        color: #fff;
        border-color: var(--hc-yellow);
        transform: translateY(-1px);
        box-shadow: 0 3px 12px rgba(254,192,28,0.3);
      }
  
      .solution-ai.active {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        border-color: #059669;
      }
  
      .solution-web.active {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        border-color: #7c3aed;
      }
  
      .solution-workflow.active {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        border-color: #dc2626;
      }
  
      @media (max-width: 768px) {
        .filter-row {
          flex-direction: column;
          align-items: stretch;
        }
        .search-container {
          max-width: none;
        }
        .filter-categories,
        .solution-filters {
          justify-content: center;
        }
      }
  
      /* ====================== CASE STUDIES SHOWCASE - MAGAZINE EXCELLENCE ====================== */
      .case-studies-section {
        max-width: 1400px;
        margin: 0 auto var(--space-8) auto;
        padding: 0 var(--space-4);
        animation: fadeInUp 0.8s ease-out 0.8s both;
      }
  
      .case-studies-container {
        width: 100%;
      }
  
      .case-studies-intro {
        text-align: center;
        margin-bottom: var(--space-8);
      }
  
      .section-headline {
        font-size: var(--text-4xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--space-3) 0;
        letter-spacing: -0.02em;
        text-shadow: 0 2px 4px rgba(0,0,0,0.05);
      }
  
      .section-description {
        font-size: var(--text-lg);
        color: var(--text-secondary);
        margin: 0 auto;
        max-width: 600px;
        line-height: 1.5;
      }
  
      .case-studies-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: var(--space-6);
        margin-bottom: var(--space-6);
      }
  
      /* ====================== PREMIUM CASE STUDY CARDS ====================== */
      .case-study-card {
        background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
        border-radius: 24px;
        box-shadow: var(--card-shadow-premium);
        display: flex;
        flex-direction: column;
        min-height: 700px;
        padding: 0;
        overflow: hidden;
        position: relative;
        border: 2px solid rgba(248,249,250,0.8);
        cursor: pointer;
        transition: all var(--transition-medium);
        background-image: radial-gradient(circle at 90% 10%, rgba(254,192,28,0.04) 0%, transparent 60%);
      }
  
      .case-study-card:hover {
        box-shadow: var(--case-study-shadow);
        border: 2px solid var(--hc-yellow);
        transform: translateY(-8px);
        background: linear-gradient(135deg, #fff 0%, #fffef8 100%);
      }
  
      .case-study-badge {
        position: absolute;
        top: var(--space-3);
        left: var(--space-3);
        padding: 0.5em 1em;
        border-radius: 20px;
        font-size: var(--text-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        z-index: 3;
        box-shadow: 0 3px 12px rgba(0,0,0,0.15);
      }
  
      .case-study-badge.ai-automation {
        background: linear-gradient(135deg, #059669 0%, #047857 100%);
        color: #fff;
      }
  
      .case-study-badge.web-optimization {
        background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
        color: #fff;
      }
  
      .case-study-badge.workflow-automation {
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: #fff;
      }
  
      .case-study-image {
        width: 100%;
        min-height: 200px;
        max-height: 200px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 2px solid #f3f4f6;
        overflow: hidden;
        position: relative;
        padding: var(--space-3);
      }
  
      .case-study-image::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, transparent 0%, rgba(254,192,28,0.08) 100%);
        opacity: 0;
        transition: opacity var(--transition-fast);
      }
  
      .case-study-card:hover .case-study-image::after {
        opacity: 1;
      }
  
      .case-study-image svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform var(--transition-medium);
      }
  
      .case-study-card:hover .case-study-image svg {
        transform: scale(1.05);
      }
  
      .case-study-content {
        flex: 1;
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
  
      .case-study-meta {
        font-size: var(--text-xs);
        color: #888;
        margin-bottom: var(--space-2);
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
      }
  
      .case-study-timeline {
        background: rgba(254,192,28,0.15);
        color: var(--strategic-accent);
        padding: 0.3em 0.6em;
        border-radius: 12px;
        font-size: var(--text-xs);
        font-weight: 700;
      }
  
      .case-study-title {
        font-size: var(--text-xl);
        font-weight: 700;
        margin: 0 0 var(--space-3) 0;
        color: var(--text-primary);
        line-height: 1.3;
        text-shadow: 0 1px 2px rgba(0,0,0,0.05);
      }
  
      .case-study-challenge {
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0 0 var(--space-4) 0;
        font-style: italic;
        border-left: 4px solid rgba(254,192,28,0.3);
        padding-left: var(--space-3);
      }
  
      .case-study-results {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
        margin: 0 0 var(--space-4) 0;
        padding: var(--space-3);
        background: rgba(254,192,28,0.05);
        border-radius: 16px;
        border: 1px solid rgba(254,192,28,0.2);
      }
  
      .result-metric {
        text-align: center;
      }
  
      .metric-value {
        display: block;
        font-size: var(--text-2xl);
        font-weight: 700;
        color: var(--strategic-accent);
        margin-bottom: var(--space-1);
      }
  
      .metric-label {
        font-size: var(--text-xs);
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
      }
  
      .case-study-tags {
        display: flex;
        gap: 0.6em;
        flex-wrap: wrap;
        margin-bottom: var(--space-4);
      }
  
      .case-study-tag {
        background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f4 100%);
        color: #444;
        border-radius: 20px;
        padding: 0.4em 0.8em;
        font-weight: 500;
        font-size: var(--text-xs);
        border: 1px solid #e9ecef;
        transition: all var(--transition-fast);
      }
  
      .case-study-tag:hover {
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        color: #fff;
        border-color: var(--hc-yellow);
      }
  
      .case-study-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        color: #fff;
        text-decoration: none;
        font-size: var(--text-base);
        font-weight: 700;
        padding: 0.8em 1.8em;
        border-radius: 25px;
        transition: all var(--transition-fast);
        box-shadow: 0 4px 15px rgba(254,192,28,0.3);
        margin-top: auto;
      }
  
      .case-study-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(254,192,28,0.4);
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      }
  
      /* Loading states */
      .loading-skeleton {
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200px 100%;
        animation: shimmer 1.5s infinite;
        border-radius: 4px;
      }
  
      .case-study-card.loading {
        pointer-events: none;
        opacity: 0.7;
      }
  
      .case-study-card.loading .case-study-title,
      .case-study-card.loading .case-study-challenge {
        color: transparent;
        border-radius: 8px;
      }
  
      /* No results state */
      .case-studies-no-results {
        text-align: center;
        padding: var(--space-12) var(--space-4);
      }
  
      .no-results-content h3 {
        font-size: var(--text-xl);
        color: #6b7280;
        margin: var(--space-4) 0 var(--space-2) 0;
      }
  
      .no-results-content p {
        font-size: var(--text-base);
        color: #9ca3af;
        margin-bottom: var(--space-4);
      }
  
      .clear-filters-btn {
        background: var(--hc-yellow);
        color: #fff;
        border: none;
        padding: 0.8em 2em;
        border-radius: 25px;
        font-weight: 700;
        cursor: pointer;
        font-size: var(--text-base);
        transition: all var(--transition-fast);
      }
  
      .clear-filters-btn:hover {
        background: #f59e0b;
        transform: translateY(-1px);
      }
  
      @media (max-width: 1000px) {
        .case-studies-grid {
          grid-template-columns: 1fr;
          gap: var(--space-4);
        }
        
        .case-study-card {
          min-height: 600px;
        }
      }
  
      @media (max-width: 600px) {
        .case-studies-section {
          padding: 0 var(--space-2);
        }
        
        .case-study-results {
          grid-template-columns: 1fr;
          gap: var(--space-2);
        }
      }
  
      /* ====================== TRUST INDICATORS SECTION ====================== */
      .trust-section {
        padding: var(--space-12) var(--space-4);
        background: linear-gradient(135deg, var(--cloud-gray) 0%, #f1f3f4 100%);
      }
  
      .trust-container {
        max-width: 1400px;
        margin: 0 auto;
        text-align: center;
      }
  
      .trust-headline h2 {
        font-size: var(--text-3xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--space-3) 0;
        animation: fadeInUp 0.8s ease-out;
      }
  
      .trust-headline p {
        font-size: var(--text-lg);
        color: var(--text-secondary);
        margin: 0 0 var(--space-8) 0;
        animation: fadeInUp 0.8s ease-out 0.2s both;
      }
  
      .trust-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
      }
  
      .trust-card {
        background: #fff;
        border-radius: 20px;
        padding: var(--space-6);
        box-shadow: var(--card-shadow);
        border: 1px solid rgba(254,192,28,0.1);
        animation: fadeInUp 0.8s ease-out;
        transition: all var(--transition-medium);
      }
  
      .trust-card:nth-child(2) {
        animation-delay: 0.3s;
      }
  
      .trust-card:nth-child(3) {
        animation-delay: 0.6s;
      }
  
      .trust-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
      }
  
      .trust-icon {
        width: 72px;
        height: 72px;
        margin: 0 auto var(--space-4) auto;
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 6px 20px rgba(254,192,28,0.3);
      }
  
      .trust-icon svg {
        color: #fff;
      }
  
      .trust-card h3 {
        font-size: var(--text-lg);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--space-3) 0;
      }
  
      .trust-card p {
        font-size: var(--text-base);
        color: var(--text-secondary);
        line-height: 1.6;
        margin: 0;
      }
  
      @media (max-width: 900px) {
        .trust-grid {
          grid-template-columns: 1fr;
          gap: var(--space-4);
        }
      }
  
      /* ====================== INTERACTIVE CALCULATOR SECTION ====================== */
      .calculator-section {
        padding: var(--space-12) var(--space-4);
        background: #fff;
      }
  
      .calculator-container {
        max-width: 1000px;
        margin: 0 auto;
      }
  
      .calculator-intro {
        text-align: center;
        margin-bottom: var(--space-8);
        animation: fadeInUp 0.8s ease-out;
      }
  
      .calculator-intro h2 {
        font-size: var(--text-3xl);
        font-weight: 700;
        color: var(--text-primary);
        margin: 0 0 var(--space-3) 0;
      }
  
      .calculator-intro p {
        font-size: var(--text-lg);
        color: var(--text-secondary);
        margin: 0;
      }
  
      .calculator-card {
        background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
        border-radius: 24px;
        padding: var(--space-6);
        box-shadow: var(--card-shadow-premium);
        border: 2px solid rgba(254,192,28,0.1);
        animation: fadeInUp 0.8s ease-out 0.3s both;
      }
  
      .calculator-inputs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        margin-bottom: var(--space-6);
      }
  
      .input-group {
        display: flex;
        flex-direction: column;
      }
  
      .input-group label {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--space-2);
      }
  
      .input-group input[type="number"] {
        padding: 0.8em 1em;
        border: 2px solid #e5e7eb;
        border-radius: 12px;
        font-size: var(--text-base);
        outline: none;
        transition: all var(--transition-fast);
      }
  
      .input-group input[type="number"]:focus {
        border-color: var(--hc-yellow);
        box-shadow: 0 0 0 3px rgba(254,192,28,0.2);
      }
  
      .input-group input[type="range"] {
        margin-bottom: var(--space-1);
        accent-color: var(--hc-yellow);
      }
  
      #automation-display {
        font-weight: 700;
        color: var(--strategic-accent);
        text-align: center;
      }
  
      .calculator-results {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
        margin-bottom: var(--space-6);
      }
  
      .result-card {
        text-align: center;
        padding: var(--space-4);
        background: rgba(254,192,28,0.05);
        border-radius: 16px;
        border: 1px solid rgba(254,192,28,0.2);
      }
  
      .result-card h3 {
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--text-secondary);
        margin: 0 0 var(--space-2) 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
  
      .result-value {
        font-size: var(--text-3xl);
        font-weight: 700;
        color: var(--strategic-accent);
        margin: 0 0 var(--space-1) 0;
      }
  
      .result-description {
        font-size: var(--text-xs);
        color: var(--text-secondary);
        font-style: italic;
      }
  
      .calculator-cta {
        text-align: center;
      }
  
      .calculator-cta-btn {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        color: #fff;
        text-decoration: none;
        font-size: var(--text-lg);
        font-weight: 700;
        padding: 1em 2.5em;
        border-radius: 50px;
        box-shadow: var(--card-shadow-hero);
        transition: all var(--transition-medium);
        margin-bottom: var(--space-2);
      }
  
      .calculator-cta-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 80px rgba(254,192,28,0.4);
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      }
  
      .calculator-note {
        font-size: var(--text-sm);
        color: var(--text-secondary);
        margin: 0;
        font-style: italic;
      }
  
      @media (max-width: 900px) {
        .calculator-inputs,
        .calculator-results {
          grid-template-columns: 1fr;
          gap: var(--space-3);
        }
      }
  
      /* ====================== FINAL CTA SECTION ====================== */
      .final-cta-section {
        padding: var(--space-12) var(--space-4);
        background: linear-gradient(135deg, var(--text-primary) 0%, #374151 100%);
        color: #fff;
        text-align: center;
      }
  
      .final-cta-container {
        max-width: 800px;
        margin: 0 auto;
        animation: fadeInUp 0.8s ease-out;
      }
  
      .final-cta-headline {
        font-size: var(--text-4xl);
        font-weight: 700;
        margin: 0 0 var(--space-4) 0;
        letter-spacing: -0.02em;
      }
  
      .final-cta-subheadline {
        font-size: var(--text-xl);
        margin: 0 0 var(--space-6) 0;
        opacity: 0.9;
        line-height: 1.4;
      }
  
      .final-cta-button {
        display: inline-flex;
        align-items: center;
        background: linear-gradient(135deg, var(--hc-yellow) 0%, #f59e0b 100%);
        color: #fff;
        text-decoration: none;
        font-size: var(--text-xl);
        font-weight: 700;
        padding: 1.2em 3em;
        border-radius: 50px;
        box-shadow: 0 10px 40px rgba(254,192,28,0.3);
        transition: all var(--transition-medium);
      }
  
      .final-cta-button:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 60px rgba(254,192,28,0.4);
      }
  
      /* ====================== FOOTER - CONSISTENT WITH BRAND ====================== */
      .footer-shell {
        background: var(--text-primary);
        color: #fff;
        padding: var(--space-6) var(--space-4) var(--space-4) var(--space-4);
        text-align: center;
      }
  
      .footer-content {
        max-width: 1400px;
        margin: 0 auto;
      }
  
      .footer-text {
        font-size: var(--text-sm);
        opacity: 0.8;
        margin: 0;
      }
  
      /* ====================== ACCESSIBILITY & PERFORMANCE ====================== */
      
      /* Focus indicators */
      .case-study-card:focus,
      .trust-card:focus {
        outline: 3px solid rgba(254,192,28,0.6);
        outline-offset: 2px;
      }
  
      /* Reduced motion preferences */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        
        .hero-section::before {
          animation: none;
        }
        
        .case-study-card:hover,
        .trust-card:hover {
          transform: none;
        }
      }
  
      /* High contrast mode support */
      @media (prefers-contrast: high) {
        .case-study-card,
        .trust-card,
        .calculator-card {
          border-width: 3px;
          border-color: #000;
        }
        
        .case-study-tag,
        .category-filter {
          border-width: 2px;
          border-color: #000;
        }
      }
  
      /* Print styles */
      @media print {
        .hero-section,
        .case-studies-filter-section,
        .calculator-section,
        .final-cta-section {
          break-inside: avoid;
        }
        
        .case-study-card {
          break-inside: avoid;
          box-shadow: none;
          border: 2px solid #000;
        }
      }