/* =========================================
     SECTION 01 STYLES: WP HERO
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-hero {
    position: relative;
    width: 100%;
    padding: 80px 20px 100px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-hero * { box-sizing: border-box; }

  /* --- BACKGROUND EFFECTS (GPU Optimized) --- */
  .wp-bg-glow {
    position: absolute;
    top: -20%; right: -10%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(56, 94, 255, 0.15) 0%, transparent 70%);
    filter: blur(100px);
    z-index: -1;
    pointer-events: none;
    will-change: transform, opacity;
    animation: wpPulse 8s infinite alternate;
  }

  /* Grid Pattern Removed */

  /* --- CONTAINER --- */
  .wp-container {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    position: relative;
    z-index: 2;
  }

  /* --- LEFT: CONTENT --- */
  .wp-content {
    flex: 1;
    max-width: 600px;
  }

  .wp-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    margin-bottom: 24px;
    color: #385EFF;
  }

  .wp-badge-text {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .wp-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
  }

  .text-gradient-wp {
    background: linear-gradient(135deg, #385EFF 0%, #28CCCD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .wp-sub {
    font-size: 1.125rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 95%;
  }

  .wp-sub strong { color: #fff; font-weight: 600; }

  /* Buttons */
  .wp-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 48px;
  }

  .btn-wp-primary {
    background: #385EFF;
    color: #fff;
    padding: 16px 32px;
    border-radius: 6px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .btn-wp-primary:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 4px 20px rgba(56, 94, 255, 0.4); 
  }

  .btn-wp-outline {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 16px 32px;
    border-radius: 6px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  
  .btn-wp-outline:hover { 
    background: rgba(255, 255, 255, 0.05); 
    border-color: #fff; 
  }

  /* Tech Stack Row */
  .wp-tech-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .tech-label {
      font-family: 'Space Grotesk', monospace;
      font-size: 0.75rem;
      color: #64748B;
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 600;
  }
  
  .tech-icons {
      display: flex; 
      gap: 20px; 
      color: #64748B; 
      font-size: 1.5rem;
  }
  
  .tech-icons i { transition: color 0.3s ease; }
  .tech-icons i:hover { color: #fff; }

  /* --- RIGHT: VISUAL (3D Animation) --- */
  .wp-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
    perspective: 1000px;
    overflow: visible;
  }

  .block-container {
    width: 360px;
    height: 360px;
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(60deg) rotateZ(-45deg);
    will-change: transform;
    animation: wpFloat 6s ease-in-out infinite;
  }

  /* Base Plate */
  .base-plate {
      position: absolute;
      top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 280px; height: 280px;
      background: rgba(13, 17, 23, 0.8);
      border: 2px solid #385EFF;
      box-shadow: 0 0 50px rgba(56, 94, 255, 0.15);
  }

  /* Floating Blocks */
  .wp-block {
      position: absolute;
      width: 80px; height: 80px;
      background: rgba(56, 94, 255, 0.15);
      border: 1px solid #385EFF;
      box-shadow: 0 0 15px rgba(56, 94, 255, 0.2);
      display: flex; align-items: center; justify-content: center;
      color: #fff;
      font-size: 1.5rem;
      transform-style: preserve-3d;
      will-change: transform;
      animation: blockAssemble 4s infinite ease-in-out;
  }
  
  .wp-block::before {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(56, 94, 255, 0.1);
      transform: translateZ(-20px);
  }

  .wb-1 { top: 20px; left: 20px; animation-delay: 0s; }
  .wb-2 { top: 20px; right: 20px; animation-delay: 0.5s; }
  .wb-3 { bottom: 20px; left: 20px; animation-delay: 1s; }
  .wb-4 { bottom: 20px; right: 20px; animation-delay: 1.5s; }
  
  /* Central "Core" Block */
  .wb-core {
      top: 50%; left: 50%; width: 120px; height: 120px;
      transform: translate(-50%, -50%) translateZ(40px);
      background: rgba(56, 94, 255, 0.6);
      border: 2px solid #fff;
      z-index: 10;
      box-shadow: 0 0 40px rgba(56, 94, 255, 0.4);
      will-change: transform, box-shadow;
      animation: corePulse 3s infinite;
  }

  /* ANIMATIONS */
  @keyframes wpPulse { 
    0% { opacity: 0.5; transform: scale(1); } 
    100% { opacity: 0.8; transform: scale(1.1); } 
  }
  
  @keyframes wpFloat { 
    0%, 100% { transform: rotateX(60deg) rotateZ(-45deg) translateY(0); } 
    50% { transform: rotateX(60deg) rotateZ(-45deg) translateY(-20px); } 
  }
  
  @keyframes blockAssemble {
      0%, 100% { transform: translateZ(10px); }
      50% { transform: translateZ(60px); }
  }
  
  @keyframes corePulse { 
      0% { transform: translate(-50%, -50%) translateZ(40px) scale(1); } 
      50% { transform: translate(-50%, -50%) translateZ(40px) scale(1.05); box-shadow: 0 0 60px rgba(56, 94, 255, 0.8); } 
      100% { transform: translate(-50%, -50%) translateZ(40px) scale(1); } 
  }

  /* RESPONSIVE */
  @media (max-width: 1024px) {
    #wp-hero { padding: 60px 20px; }
    .wp-container { flex-direction: column; text-align: center; gap: 60px; }
    .wp-content { align-items: center; display: flex; flex-direction: column; max-width: 100%; }
    .wp-actions { justify-content: center; }
    .wp-tech-row { justify-content: center; flex-direction: column; gap: 15px; }
    .wp-visual { width: 100%; height: 400px; }
    .block-container { transform: rotateX(60deg) rotateZ(-45deg) scale(0.8); }
  }

  @media (max-width: 600px) {
    .wp-title { font-size: 2.5rem; }
    .wp-actions { flex-direction: column; width: 100%; gap: 15px; }
    .btn-wp-primary, .btn-wp-outline { width: 100%; justify-content: center; }
    .wp-visual { height: 350px; }
    .block-container { transform: rotateX(60deg) rotateZ(-45deg) scale(0.65); }
  }

  
  
    /* =========================================
     SECTION 02 STYLES: ARCHITECTURE DASHBOARD
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-interface-section {
    position: relative;
    width: 100%;
    padding: 100px 20px;
    background: transparent; /* Global background prevails */
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: visible; /* Allows shadows/glows to bleed */
    z-index: 1;
  }
  
  #wp-interface-section * { box-sizing: border-box; }

  .wp-inner-wrap {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* --- TOP: H2 HEADER --- */
  .wp-top-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
  }

  /* Decorative line */
  .wp-top-header::before {
    content: '';
    display: block;
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #385EFF);
    margin: 0 auto 20px auto;
  }

  .wp-main-h2 {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0;
    color: #fff; /* Fallback */
  }

  /* Gradient Text Effect */
  .wp-main-h2 .gradient-text {
    background: linear-gradient(180deg, #FFFFFF 0%, #94A3B8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .text-highlight {
    color: #385EFF;
    position: relative;
    display: inline-block;
    z-index: 1;
  }
  
  /* Underline effect */
  .text-highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(56, 94, 255, 0.2);
    z-index: -1;
    transform: skewX(-15deg);
  }

  /* --- MAIN CONTENT: GLASS DASHBOARD --- */
  .wp-dashboard-card {
    background: rgba(15, 23, 42, 0.6); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 50px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    /* Removed overflow:hidden to allow floating stats to overlap if needed, 
       but added containment for glow */
  }

  /* Glowing Corner Effect */
  .wp-dashboard-card::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(56, 94, 255, 0.15) 0%, transparent 70%);
    z-index: -1;
    pointer-events: none;
  }

  /* --- LEFT COL: CONTENT --- */
  .wp-content-side {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .wp-sub-h3 {
    font-family: 'Mona Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .wp-sub-h3 i { color: #385EFF; font-size: 1.2rem; }

  .wp-paragraph {
    font-size: 1.125rem;
    line-height: 1.8;
    color: #94A3B8;
    margin-bottom: 40px;
  }

  /* Feature Grid */
  .wp-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }

  .wf-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
  }

  .wf-icon-box {
    width: 40px;
    height: 40px;
    background: rgba(56, 94, 255, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #385EFF;
    flex-shrink: 0;
    font-size: 1rem;
  }

  .wf-text h4 {
    font-family: 'Mona Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: #fff;
  }

  .wf-text p {
    font-size: 0.8rem;
    color: #64748B;
    margin: 0;
    line-height: 1.4;
  }

  /* --- RIGHT COL: VISUAL (Code Editor) --- */
  .wp-visual-side {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 1000px;
  }

  .code-editor-mockup {
    width: 100%;
    background: #0F131F;
    border: 1px solid #1E293B;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    transform: rotateY(-5deg);
    transition: transform 0.5s ease;
    will-change: transform;
  }

  .wp-dashboard-card:hover .code-editor-mockup {
    transform: rotateY(0deg);
  }

  /* Editor Header */
  .cem-header {
    background: #1E293B;
    padding: 12px 15px;
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #334155;
  }
  .cem-dot { width: 10px; height: 10px; border-radius: 50%; }
  .cd-red { background: #FF5F56; }
  .cd-yellow { background: #FFBD2E; }
  .cd-green { background: #27C93F; }

  /* Editor Body */
  .cem-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Code Skeleton Animation */
  .code-line {
    height: 8px;
    background: #334155;
    border-radius: 4px;
    width: 100%;
    opacity: 0.4;
  }
  .cl-1 { width: 60%; background: #A855F7; }
  .cl-2 { width: 80%; margin-left: 20px; }
  .cl-3 { width: 40%; margin-left: 20px; background: #385EFF; }
  .cl-4 { width: 70%; margin-left: 20px; }
  .cl-5 { width: 50%; }

  /* Floating Stats Card */
  .stats-float {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: #1E293B;
    border: 1px solid #385EFF;
    padding: 20px;
    border-radius: 12px;
    width: 180px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 10;
  }

  .sf-label {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #94A3B8;
    letter-spacing: 1px;
    margin-bottom: 5px;
    font-weight: 600;
  }
  
  .sf-value {
    font-family: 'Space Grotesk', monospace;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .sf-value i { color: #27C93F; font-size: 1rem; }

  /* --- RESPONSIVE --- */
  @media (max-width: 900px) {
    #wp-interface-section { padding: 60px 15px; }

    .wp-dashboard-card {
      grid-template-columns: 1fr;
      padding: 30px 24px;
      gap: 50px;
    }
    
    .wp-top-header { margin-bottom: 40px; }

    .code-editor-mockup {
      transform: none; /* Disable 3D on mobile */
      margin-bottom: 20px;
    }
    
    .wp-dashboard-card:hover .code-editor-mockup { transform: none; }

    .stats-float {
      right: 0;
      bottom: -10px;
    }
    
    .wp-feature-grid {
      grid-template-columns: 1fr;
      gap: 20px;
    }
  }
  
  
    /* =========================================
     SECTION 02.1 STYLES: PERFORMANCE MATRIX
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-matrix {
    position: relative;
    width: 100%;
    padding: 0 20px 100px 20px; /* Top padding 0 to seamlessly follow Sec 02 */
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: visible; /* Allows glows to blend */
    z-index: 2; /* Sits comfortably above/below neighbors */
  }
  
  #wp-matrix * { box-sizing: border-box; }

  .matrix-container {
    max-width: 1100px; /* Aligned with Sec 02 width */
    margin: 0 auto;
    position: relative;
  }

  /* --- MATRIX GRID --- */
  .perf-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    width: 100%;
  }

  .matrix-card {
    background: rgba(15, 23, 42, 0.6); /* Matches Sec 02 Glass */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 35px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    text-align: left;
    position: relative;
    overflow: hidden;
    height: 100%; /* Equal height cards */
  }

  .matrix-card:hover {
    transform: translateY(-5px);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
  }

  /* Revenue Card Style (Green Accent) */
  .mc-revenue { border-top: 4px solid #22C55E; }
  .mc-revenue:hover { border-color: #22C55E; box-shadow: 0 20px 50px -10px rgba(34, 197, 94, 0.15); }
  
  /* Comparison Card Style (Blue Accent) */
  .mc-compare { border-top: 4px solid #385EFF; }
  .mc-compare:hover { border-color: #385EFF; box-shadow: 0 20px 50px -10px rgba(56, 94, 255, 0.15); }

  .mc-icon {
    font-size: 2.2rem;
    margin-bottom: 24px;
    display: inline-block;
  }
  .icon-rev { color: #22C55E; }
  .icon-comp { color: #385EFF; }

  .mc-title {
    font-family: 'Mona Sans', sans-serif; /* Global Heading Font */
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
    line-height: 1.25;
  }

  .mc-desc {
    font-size: 1rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 32px;
    flex-grow: 1;
  }

  /* Stats/Metrics Grid */
  .mc-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }

  .mc-stat-item {
    font-family: 'Space Grotesk', monospace; /* Tech/Data Font */
    background: rgba(255,255,255,0.03);
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #fff;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
  }
  
  /* Hover effects for stats */
  .mc-revenue .mc-stat-item:hover { background: rgba(34, 197, 94, 0.1); border-color: #22C55E; }
  .mc-compare .mc-stat-item:hover { background: rgba(56, 94, 255, 0.1); border-color: #385EFF; }

  .highlight-green { color: #22C55E; font-weight: 700; margin-right: 6px; }
  .highlight-red { color: #FF5F56; font-weight: 700; margin-right: 6px; }

  /* Background Glows (Performance Optimized) */
  .mc-bg-glow {
    position: absolute;
    bottom: -60px; right: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    will-change: opacity;
  }
  .glow-green { background: #22C55E; }
  .glow-blue { background: #385EFF; }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    #wp-matrix { padding: 0 20px 60px 20px; }
    .perf-matrix { grid-template-columns: 1fr; gap: 24px; }
    .matrix-card { padding: 30px 24px; }
    .mc-bg-glow { width: 150px; height: 150px; filter: blur(50px); }
  }
  
  
    /* =========================================
     SECTION 03 STYLES: THE GAPS
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-gaps {
    position: relative;
    width: 100%;
    padding: 100px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-gaps * { box-sizing: border-box; }

  .gap-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
    position: relative;
    z-index: 2;
  }

  /* --- LEFT: VISUAL (Site Health Scanner) --- */
  .gap-visual-col {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
  }

  .scanner-card {
    width: 100%;
    max-width: 400px; /* Responsive restraint */
    height: 500px;
    background: rgba(15, 23, 42, 0.6); /* Consistent Glass Base */
    border: 1px solid rgba(255, 95, 86, 0.3); /* Red Warning Border */
    border-radius: 24px;
    padding: 40px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
  }
  
  .scanner-card:hover { transform: translateY(-5px); }

  /* Scanner Label */
  .scanner-label {
      font-family: 'Space Grotesk', monospace;
      font-size: 0.8rem;
      color: #94A3B8;
      letter-spacing: 1px;
      margin-bottom: 20px;
      text-align: center;
      text-transform: uppercase;
  }

  /* The Wireframe to Scan */
  .wp-wireframe {
    width: 100%;
    height: 350px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    position: relative;
    margin-bottom: 24px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
  }

  /* WP Logo Overlay */
  .wp-logo-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 6rem;
    color: rgba(255,255,255,0.05);
    z-index: 1;
  }

  /* Error Zones */
  .error-zone {
    position: absolute;
    background: rgba(255, 95, 86, 0.15);
    border: 1px dashed #FF5F56;
    border-radius: 4px;
    opacity: 0;
    will-change: opacity;
    animation: flashError 3s infinite;
  }
  .ez-1 { top: 20px; right: 20px; width: 60px; height: 60px; animation-delay: 0.5s; }
  .ez-2 { bottom: 40px; left: 20px; width: 80%; height: 40px; animation-delay: 1.2s; }
  .ez-3 { top: 120px; left: 50%; transform: translateX(-50%); width: 200px; height: 100px; animation-delay: 2s; }

  /* Scanner Line */
  .scan-line {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: #FF5F56;
    box-shadow: 0 0 15px #FF5F56;
    z-index: 10;
    will-change: top;
    animation: scanVertical 3s infinite linear;
  }

  /* Warning Label */
  .scan-warning {
    position: absolute;
    top: 10px; right: 10px;
    background: #FF5F56;
    color: #0B0F19;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeInOut 3s infinite;
  }

  /* Leak Counter */
  .leak-counter-box {
    text-align: center;
  }
  .lcb-label { 
      font-family: 'Space Grotesk', monospace;
      font-size: 0.7rem; 
      color: #94A3B8; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
  }
  .lcb-val { 
      font-family: 'Space Grotesk', monospace; 
      font-size: 1.5rem; 
      font-weight: 700; 
      color: #FF5F56; 
      margin-top: 5px;
  }

  /* --- RIGHT: CONTENT (Pain Points) --- */
  .gap-content-col {
    flex: 1.2;
  }

  .gap-header { margin-bottom: 40px; }

  .gap-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 95, 86, 0.1);
    border: 1px solid rgba(255, 95, 86, 0.3);
    border-radius: 50px;
    color: #FF5F56;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .gap-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #fff;
  }
  
  .text-danger { color: #FF5F56; }

  .gap-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .gap-item {
    background: rgba(255,255,255,0.03);
    border-left: 4px solid #FF5F56;
    padding: 24px;
    border-radius: 0 12px 12px 0;
    transition: transform 0.3s ease, background-color 0.3s ease;
  }
  
  .gap-item:hover {
    background: rgba(255, 95, 86, 0.08);
    transform: translateX(10px);
  }

  .gi-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
  }
  .gi-icon { color: #FF5F56; font-size: 1.1rem; }
  
  .gi-title {
    font-family: 'Space Grotesk', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
  }

  .gi-desc {
    font-size: 1rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 12px;
  }
  
  .gi-stat {
    display: inline-block;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    color: #FF5F56;
    font-weight: 700;
    background: rgba(255, 95, 86, 0.1);
    padding: 4px 10px;
    border-radius: 4px;
    letter-spacing: 0.5px;
  }

  /* ANIMATIONS */
  @keyframes scanVertical { 
    0% { top: 0; } 
    50% { top: 100%; }
    100% { top: 0; } 
  }
  @keyframes flashError {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }
  @keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
  }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    #wp-gaps { padding: 60px 20px; }
    .gap-container { flex-direction: column; gap: 60px; }
    .gap-visual-col { width: 100%; order: -1; }
    .scanner-card { height: 450px; }
    .gap-item:hover { transform: translateX(5px); }
  }
  
  
    /* =========================================
     SECTION 04 STYLES: SERVICES STACK
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-services {
    position: relative;
    width: 100%;
    padding: 100px 20px;
    background: transparent; /* Seamless integration */
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: visible; /* Allow hover effects to bleed */
    z-index: 1;
  }
  
  #wp-services * { box-sizing: border-box; }

  .serv-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* --- HEADER --- */
  .serv-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
  }
  
  .serv-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    color: #385EFF;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .serv-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
  }

  /* --- SERVICES GRID --- */
  .serv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  /* Card Base */
  .serv-card {
    background: rgba(15, 23, 42, 0.6); /* Consistent Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 32px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .serv-card:hover {
    transform: translateY(-8px);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5);
  }

  /* Card Accents (Hover State) */
  .card-theme:hover { border-color: #385EFF; box-shadow: 0 20px 60px -10px rgba(56, 94, 255, 0.15); }
  .card-plugin:hover { border-color: #A855F7; box-shadow: 0 20px 60px -10px rgba(168, 85, 247, 0.15); }
  .card-perf:hover { border-color: #22C55E; box-shadow: 0 20px 60px -10px rgba(34, 197, 94, 0.15); }

  /* Icon Box */
  .sc-icon-box {
    width: 64px; height: 64px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    background: rgba(255,255,255,0.03);
    margin-bottom: 32px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: 1px solid rgba(255,255,255,0.05);
  }
  
  .card-theme .sc-icon-box { color: #385EFF; }
  .card-plugin .sc-icon-box { color: #A855F7; }
  .card-perf .sc-icon-box { color: #22C55E; }
  
  .serv-card:hover .sc-icon-box { transform: scale(1.05) rotate(3deg); background: rgba(255,255,255,0.08); }

  /* Typography */
  .sc-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
  }

  .sc-sub {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    display: block;
    color: #94A3B8;
  }
  
  .card-theme .sc-sub { color: #385EFF; }
  .card-plugin .sc-sub { color: #A855F7; }
  .card-perf .sc-sub { color: #22C55E; }

  .sc-desc {
    font-size: 1rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 32px;
    flex-grow: 1;
  }

  /* Tags/Features */
  .sc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
  }

  .sc-tag {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #94A3B8;
    font-weight: 600;
    transition: color 0.2s ease;
  }
  
  .serv-card:hover .sc-tag { color: #fff; border-color: rgba(255,255,255,0.2); }

  /* RESPONSIVE */
  @media (max-width: 1024px) {
    .serv-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  }

  @media (max-width: 600px) {
    .serv-header { margin-bottom: 50px; }
    .serv-grid { grid-template-columns: 1fr; gap: 30px; }
    .serv-title { font-size: 2.5rem; }
    .serv-card { padding: 32px 24px; min-height: auto; }
  }
  
  
    /* =========================================
     SECTION 05 STYLES: IMPLEMENTATION PROCESS
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-process {
    position: relative;
    width: 100%;
    padding: 100px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-process * { box-sizing: border-box; }

  /* Background Grid */
  .proc-bg-grid {
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(rgba(56, 94, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(56, 94, 255, 0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -1;
    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    pointer-events: none;
  }

  .proc-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
    position: relative;
    z-index: 2;
    align-items: center;
  }

  /* --- LEFT: TIMELINE (Content) --- */
  .proc-content-col {
    flex: 1;
    max-width: 550px;
  }

  .proc-header { margin-bottom: 48px; }

  .proc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    color: #385EFF;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .proc-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
  }

  /* Timeline List */
  .proc-list {
    position: relative;
    border-left: 2px solid rgba(255,255,255,0.08);
    padding-left: 32px;
  }

  .proc-item {
    position: relative;
    padding-bottom: 40px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s ease;
  }

  .proc-item:last-child { padding-bottom: 0; }

  /* Active State Logic */
  .proc-item.active { opacity: 1; }
  .proc-item:hover { opacity: 0.8; }
  .proc-item.active:hover { opacity: 1; }

  /* Timeline Dot */
  .proc-item::before {
    content: '';
    position: absolute;
    left: -38px;
    top: 4px;
    width: 10px; height: 10px;
    background: #0F172A;
    border: 2px solid #64748B;
    border-radius: 50%;
    transition: all 0.3s ease;
    z-index: 2;
  }

  /* Active Dot Styling per Step */
  .proc-item.active::before {
    transform: scale(1.4);
    box-shadow: 0 0 15px currentColor;
    background: currentColor;
  }

  /* Step Colors & Typography */
  .step-1 { color: #FF5F56; } /* Audit - Red */
  .step-2 { color: #A855F7; } /* Dev - Purple */
  .step-3 { color: #22C55E; } /* Launch - Green */

  .proc-item.step-1.active::before { border-color: #FF5F56; color: #FF5F56; }
  .proc-item.step-2.active::before { border-color: #A855F7; color: #A855F7; }
  .proc-item.step-3.active::before { border-color: #22C55E; color: #22C55E; }

  .pi-head {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    color: #64748B;
  }
  
  .proc-item.active .pi-head { color: inherit; }

  .pi-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: #fff;
    line-height: 1.2;
  }

  .pi-sub {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #94A3B8;
    margin-bottom: 12px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .pi-desc {
    font-size: 1rem;
    color: #CBD5E1;
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
  }
  
  .proc-item.active .pi-desc { max-height: 200px; opacity: 1; }

  /* --- RIGHT: VISUAL (Blueprint) --- */
  .proc-visual-col {
    flex: 1.2;
    position: relative;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.6); /* Consistent Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5);
    overflow: hidden;
  }

  .visual-layer {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
  }
  
  .visual-layer.active { opacity: 1; transform: scale(1); pointer-events: auto; }

  /* Visual 1: Audit (Scanner) */
  .audit-scan {
    width: 280px; height: 280px;
    border: 2px dashed rgba(255, 95, 86, 0.3);
    border-radius: 50%;
    position: relative;
    will-change: transform;
    animation: spinSlow 10s linear infinite;
  }
  .scan-beam {
    position: absolute; top: 0; left: 0; width: 50%; height: 50%;
    background: linear-gradient(135deg, rgba(255, 95, 86, 0.2), transparent);
    border-radius: 100% 0 0 0;
    transform-origin: 100% 100%;
    will-change: transform;
    animation: scanRadar 3s linear infinite;
  }
  .audit-icon { font-size: 3.5rem; color: #FF5F56; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

  /* Visual 2: Design (Wireframe) */
  .wireframe-box {
    width: 280px; height: 180px;
    border: 2px solid #A855F7;
    position: relative;
    display: flex; flex-direction: column; padding: 12px; gap: 10px;
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.05);
  }
  .wf-block { background: rgba(168, 85, 247, 0.2); border-radius: 4px; }
  .wf-1 { height: 24px; width: 100%; }
  .wf-2 { height: 80px; width: 60%; }
  .wf-3 { height: 80px; width: 35%; position: absolute; right: 12px; top: 46px; }
  .design-icon { font-size: 3.5rem; color: #A855F7; position: absolute; bottom: -20px; right: -20px; z-index: 2; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }

  /* Visual 3: Launch (Rocket) */
  .launch-rocket {
    font-size: 4.5rem; color: #22C55E;
    filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.4));
    will-change: transform;
    animation: rocketFloat 3s infinite ease-in-out;
  }
  .launch-stats {
    display: flex; gap: 15px; margin-top: 30px;
  }
  .ls-box { 
      text-align: center; 
      background: rgba(34, 197, 94, 0.1); 
      padding: 12px 20px; 
      border-radius: 8px; 
      border: 1px solid rgba(34, 197, 94, 0.3); 
  }
  .ls-val { font-family: 'Space Grotesk', monospace; font-weight: 700; color: #fff; font-size: 1.5rem; line-height: 1; }
  .ls-label { font-size: 0.7rem; color: #22C55E; text-transform: uppercase; margin-top: 4px; letter-spacing: 0.5px; }

  /* Visual Label Text */
  .v-label {
      margin-top: 30px; 
      font-family: 'Space Grotesk', monospace; 
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-size: 0.9rem;
  }

  /* ANIMATIONS */
  @keyframes spinSlow { 100% { transform: rotate(360deg); } }
  @keyframes scanRadar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  @keyframes rocketFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

  /* RESPONSIVE */
  @media (max-width: 1024px) {
    .proc-container { flex-direction: column; gap: 60px; }
    .proc-content-col, .proc-visual-col { width: 100%; max-width: 100%; }
    .proc-visual-col { height: 400px; }
  }

  @media (max-width: 600px) {
     #wp-process { padding: 60px 20px; }
     .proc-title { font-size: 2.5rem; }
     .proc-visual-col { height: 350px; }
     /* Ensure tabs are clickable on mobile */
     .proc-item { padding-bottom: 30px; }
  }
  
  
    /* =========================================
     SECTION 06 STYLES: USE CASES
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-cases {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-cases * { box-sizing: border-box; }

  .case-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }

  /* --- HEADER --- */
  .case-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
  }
  
  .case-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    color: #385EFF;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .case-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
  }
  
  .text-highlight { 
    background: linear-gradient(135deg, #28CCCD 0%, #385EFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* --- CASE STUDY GRID --- */
  .case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  /* Card Base */
  .case-card {
    background: rgba(15, 23, 42, 0.6); /* Standard Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 32px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  
  .case-card:hover {
    transform: translateY(-8px);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 20px 60px -10px rgba(0,0,0,0.5);
  }

  /* Specific Card Accents */
  .card-ecom:hover { border-color: #22C55E; box-shadow: 0 20px 60px -10px rgba(34, 197, 94, 0.15); }
  .card-saas:hover { border-color: #A855F7; box-shadow: 0 20px 60px -10px rgba(168, 85, 247, 0.15); }
  .card-corp:hover { border-color: #385EFF; box-shadow: 0 20px 60px -10px rgba(56, 94, 255, 0.15); }

  /* Card Header */
  .cc-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
  }

  .cc-icon-box {
    width: 56px; height: 56px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
  }
  
  .card-ecom .cc-icon-box { color: #22C55E; }
  .card-saas .cc-icon-box { color: #A855F7; }
  .card-corp .cc-icon-box { color: #385EFF; }

  .cc-type {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94A3B8;
    font-weight: 700;
  }

  /* Metric Highlight */
  .cc-metric {
    font-family: 'Space Grotesk', monospace; /* Data Font */
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
    letter-spacing: -1px;
  }
  
  .val-green { color: #22C55E; }
  .val-purple { color: #A855F7; }
  .val-blue { color: #385EFF; }

  .cc-metric-label {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.8rem;
    color: #94A3B8;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 24px;
    display: block;
    letter-spacing: 0.5px;
  }

  /* Description */
  .cc-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
  }

  .cc-desc {
    font-size: 0.95rem;
    color: #CBD5E1;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 32px;
  }

  /* Tags */
  .cc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
  }
  
  .cc-tag {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    color: #94A3B8;
    font-weight: 600;
  }

  /* Visual: Mini Charts */
  .cc-visual {
    height: 60px;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    padding: 12px;
    position: relative;
    border: 1px solid rgba(255,255,255,0.05);
  }

  /* eCommerce: Speed bar */
  .speed-bar-c { width: 100%; height: 6px; background: rgba(255,255,255,0.1); border-radius: 4px; position: relative; overflow: hidden; }
  .speed-fill { height: 100%; background: #22C55E; border-radius: 4px; width: 30%; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); will-change: width; }
  .card-ecom:hover .speed-fill { width: 92%; }
  
  /* SaaS: Retention Curve */
  .retention-curve { width: 100%; height: 100%; border-bottom: 2px solid #A855F7; position: relative; overflow: hidden; }
  .curve-fill { 
      position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; 
      background: linear-gradient(to top, rgba(168, 85, 247, 0.2), transparent); 
      transform: skewX(-20deg) scaleY(0.4); 
      transform-origin: bottom;
      transition: transform 1s ease;
      will-change: transform;
  }
  .card-saas:hover .curve-fill { transform: skewX(-20deg) scaleY(1); }

  /* Corporate: Lead Bar */
  .lead-bar { display: flex; align-items: flex-end; gap: 6px; height: 100%; width: 100%; }
  .lb { width: 20%; background: #385EFF; border-radius: 2px; opacity: 0.4; transition: opacity 0.3s ease; }
  .lb-last { height: 90% !important; opacity: 1; box-shadow: 0 0 10px rgba(56, 94, 255, 0.4); }
  .card-corp:hover .lb { opacity: 0.8; }

  /* RESPONSIVE */
  @media (max-width: 1024px) {
    .case-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  }

  @media (max-width: 600px) {
    #wp-cases { padding: 60px 20px; }
    .case-grid { grid-template-columns: 1fr; gap: 30px; }
    .case-title { font-size: 2.5rem; }
    .case-card { padding: 32px 24px; }
  }
  
  
    /* =========================================
     SECTION 07 STYLES: PRICING & ROI
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-pricing {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-pricing * { box-sizing: border-box; }

  /* Background Grid */
  .pricing-bg-grid {
    position: absolute;
    inset: 0;
    background-image: 
      linear-gradient(rgba(56, 94, 255, 0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(56, 94, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
    mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
    pointer-events: none;
  }

  .pricing-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
  }
  
  /* --- HEADER --- */
  .pricing-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px auto;
  }
  
  .pricing-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    color: #385EFF;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .pricing-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
  }
  
  .text-purple { color: #A855F7; }
  
  .pricing-desc {
    font-size: 1.125rem;
    color: #94A3B8;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
  }

  /* --- PRICING GRID --- */
  .tier-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 100px;
  }

  .tier-card {
    background: rgba(15, 23, 42, 0.6); /* Standard Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
  }
  
  .tier-card:hover {
    transform: translateY(-10px);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
  }

  /* Tier Highlights */
  .tier-starter { border-top: 4px solid #28CCCD; }
  .tier-growth { border-top: 4px solid #A855F7; box-shadow: 0 0 40px rgba(168, 85, 247, 0.05); }
  .tier-ent { border-top: 4px solid #22C55E; }
  
  .tier-growth:hover { box-shadow: 0 20px 60px -10px rgba(168, 85, 247, 0.15); }

  /* Popular Tag */
  .pop-tag {
      position: absolute; 
      top: 0; right: 0; 
      background: #A855F7; 
      color: white; 
      font-family: 'Space Grotesk', monospace;
      font-size: 0.7rem; 
      font-weight: 700; 
      padding: 6px 16px; 
      border-bottom-left-radius: 16px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
  }

  /* Tier Content */
  .tier-label {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #94A3B8;
    margin-bottom: 12px;
    display: block;
  }

  .tier-name {
    font-family: 'Mona Sans', sans-serif;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
  }

  .tier-price {
    font-size: 1rem;
    color: #64748B;
    font-weight: 500;
    margin-bottom: 32px;
  }

  .tier-features {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 24px;
    flex-grow: 1;
  }
  
  .tier-features li {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 0.95rem; color: #CBD5E1; margin-bottom: 16px;
    line-height: 1.5;
  }
  
  .tf-icon { color: #28CCCD; font-size: 0.9rem; margin-top: 4px; }
  
  .tier-growth .tf-icon { color: #A855F7; }
  .tier-ent .tf-icon { color: #22C55E; }

  /* ROI Section */
  .roi-wrapper {
    background: linear-gradient(180deg, rgba(56, 94, 255, 0.03) 0%, rgba(15, 23, 42, 0.4) 100%);
    border: 1px solid rgba(56, 94, 255, 0.15);
    border-radius: 32px;
    padding: 60px;
    position: relative;
    overflow: hidden;
  }
  
  .roi-header { text-align: center; margin-bottom: 48px; }
  
  .roi-title { 
      font-size: 1.75rem; 
      font-weight: 700; 
      margin-bottom: 12px; 
      font-family: 'Mona Sans', sans-serif;
      color: #fff;
  }
  
  .roi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  
  .roi-card {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease;
  }
  
  .roi-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.1); }
  
  .roi-val {
    font-family: 'Mona Sans', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
    display: block;
    background: linear-gradient(135deg, #fff 0%, #94A3B8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .roi-label { 
      font-family: 'Space Grotesk', monospace;
      font-size: 0.8rem; 
      font-weight: 700; 
      color: #A855F7; 
      margin-bottom: 16px; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
      display: block;
  }
  
  .roi-text { 
      font-size: 0.9rem; 
      color: #94A3B8; 
      line-height: 1.5; 
  }

  /* Color Variations */
  .val-teal { color: #28CCCD; }
  .val-purple { color: #A855F7; }
  .val-green { color: #22C55E; }

  /* RESPONSIVE */
  @media (max-width: 1024px) {
      .tier-grid { gap: 20px; }
      .roi-wrapper { padding: 40px; }
      .roi-grid { gap: 20px; }
  }

  @media (max-width: 900px) {
    .tier-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto 80px auto; }
    .roi-grid { grid-template-columns: 1fr; }
    .pricing-title { font-size: 2.2rem; }
    .tier-card { padding: 32px 24px; }
    .roi-val { font-size: 2.5rem; }
  }
  
  
    /* =========================================
     SECTION 08 STYLES: TRUST & REVIEWS
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-trust {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-trust * { box-sizing: border-box; }

  .trust-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 80px;
    position: relative;
    z-index: 2;
    align-items: flex-start; /* Aligns content to top */
  }

  /* --- LEFT: CONTENT --- */
  .trust-content {
    flex: 1;
    max-width: 550px;
    position: sticky;
    top: 100px; /* Sticky effect for scrolling reviews */
  }

  .trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    color: #385EFF;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .trust-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 40px;
    color: #fff;
  }
  
  .text-highlight { 
    color: #28CCCD; 
    position: relative;
    display: inline-block;
  }

  /* Why Blocks */
  .trust-block {
    margin-bottom: 32px;
    padding-left: 24px;
    border-left: 2px solid rgba(255,255,255,0.08);
    transition: all 0.3s ease;
  }
  
  .trust-block:hover {
    border-left-color: #385EFF;
    padding-left: 28px;
    background: linear-gradient(90deg, rgba(56, 94, 255, 0.05), transparent);
  }

  .tb-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
  }

  .tb-desc {
    font-size: 1.05rem;
    color: #94A3B8;
    line-height: 1.6;
  }

  .tb-highlight {
    color: #28CCCD;
    font-weight: 700;
  }

  /* --- RIGHT: REVIEWS STACK --- */
  .reviews-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .rev-header {
    font-family: 'Space Grotesk', monospace;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #64748B;
    margin-bottom: 8px;
    font-weight: 700;
    text-align: left;
    display: block;
  }

  .review-card {
    background: rgba(15, 23, 42, 0.6); /* Standard Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 32px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .review-card:hover {
    transform: translateX(-5px) translateY(-5px);
    background: rgba(15, 23, 42, 0.85);
    box-shadow: 0 20px 50px -10px rgba(0,0,0,0.5);
  }

  /* Specific Card Accents */
  .rc-ecom:hover { border-color: #385EFF; }
  .rc-saas:hover { border-color: #A855F7; }
  .rc-serv:hover { border-color: #22C55E; }

  .rev-quote {
    font-size: 1.1rem;
    font-style: italic;
    color: #E2E8F0;
    margin-bottom: 24px;
    line-height: 1.6;
    position: relative; 
    z-index: 2;
  }

  .rev-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 16px;
  }

  .rev-avatar {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
  }
  
  .ra-ecom { color: #385EFF; background: rgba(56, 94, 255, 0.1); border: 1px solid rgba(56, 94, 255, 0.2); }
  .ra-saas { color: #A855F7; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); }
  .ra-serv { color: #22C55E; background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.2); }

  .rev-info h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px 0;
  }
  
  .rev-info p {
    font-size: 0.8rem;
    color: #94A3B8;
    margin: 0;
    font-family: 'Space Grotesk', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  /* Decorative Quote Mark */
  .quote-icon {
    position: absolute;
    top: 20px; right: 24px;
    font-size: 4rem;
    color: rgba(255,255,255,0.03);
    font-family: serif;
    line-height: 1;
    pointer-events: none;
  }

  /* RESPONSIVE */
  @media (max-width: 900px) {
    #wp-trust { padding: 60px 20px; }
    .trust-container { flex-direction: column; gap: 60px; }
    .trust-content { max-width: 100%; text-align: left; position: static; }
    .reviews-col { width: 100%; }
    .trust-title { font-size: 2.5rem; }
  }
  
  
    /* =========================================
     SECTION 09 STYLES: FAQ
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-faq {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-faq * { box-sizing: border-box; }

  /* --- FAQ CONTAINER --- */
  .faq-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.5fr; 
    gap: 80px;
    position: relative;
    z-index: 2;
    align-items: start;
  }
  
  /* LEFT: Header */
  .faq-header-col {
    position: sticky;
    top: 120px;
  }

  .faq-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    color: #385EFF;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .faq-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #fff;
  }

  .faq-desc {
    font-size: 1.1rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 30px;
  }

  /* RIGHT: Accordion */
  .neural-accordion {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .acc-item {
    background: rgba(15, 23, 42, 0.6); /* Standard Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .acc-item.active {
    background: rgba(15, 23, 42, 0.9);
    border-color: #385EFF;
    box-shadow: 0 10px 40px -10px rgba(56, 94, 255, 0.15);
  }

  .acc-header {
    width: 100%;
    padding: 24px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    outline: none;
    color: #fff;
    transition: background-color 0.2s ease;
  }
  
  .acc-header:hover {
      background: rgba(255,255,255,0.02);
  }

  .acc-title-text {
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    padding-right: 20px;
    line-height: 1.4;
    color: #F8FAFC;
  }

  .acc-icon {
    color: #64748B;
    font-size: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
  }

  .acc-item.active .acc-icon {
    transform: rotate(45deg); 
    color: #385EFF;
    border-color: #385EFF;
    background: rgba(56, 94, 255, 0.1);
  }

  .acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .acc-body {
    padding: 0 30px 30px 30px;
    color: #94A3B8;
    line-height: 1.7;
    font-size: 1rem;
  }
  
  .acc-body strong { color: #fff; font-weight: 600; }

  /* RESPONSIVE */
  @media (max-width: 1024px) {
    .faq-container { grid-template-columns: 1fr; gap: 50px; }
    .faq-header-col { position: relative; top: auto; text-align: left; max-width: 100%; }
  }
  
  @media (max-width: 600px) {
    #wp-faq { padding: 80px 20px; }
    .faq-title { font-size: 2.5rem; }
    .acc-header { padding: 20px 24px; }
    .acc-body { padding: 0 24px 24px 24px; }
    .acc-title-text { font-size: 1rem; }
  }
  
  
    /* =========================================
     SECTION 10 STYLES: FINAL CTA
     ========================================= */

  /* --- SCOPED RESET & LAYOUT --- */
  #wp-final-cta {
    position: relative;
    width: 100%;
    padding: 120px 20px;
    background: transparent;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Global Body Font */
    color: #fff;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 1;
  }
  
  #wp-final-cta * { box-sizing: border-box; }

  /* Background Glow */
  .final-bg-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(56, 94, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }

  .final-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 80px;
    background: rgba(15, 23, 42, 0.6); /* Standard Glass Base */
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 32px;
    padding: 80px 60px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  }
  
  /* --- LEFT: Report Visual --- */
  .report-visual {
    flex: 1;
    max-width: 450px;
    position: relative;
    display: flex;
    justify-content: center;
  }

  .audit-card {
    background: #0B0F19;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    position: relative;
    transform: rotate(-3deg);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1px solid rgba(255,255,255,0.1);
    width: 100%;
  }
  
  .final-container:hover .audit-card { transform: rotate(0deg) scale(1.02); }

  .audit-header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 20px;
    margin-bottom: 25px;
    display: flex; justify-content: space-between; align-items: center;
  }
  
  .ah-title { 
      font-weight: 800; 
      font-family: 'Mona Sans', sans-serif; 
      font-size: 1.2rem; 
      color: #fff; 
      display: flex; align-items: center; gap: 10px; 
  }
  
  .ah-badge { 
      background: rgba(56, 94, 255, 0.15); 
      color: #385EFF; 
      font-size: 0.7rem; 
      font-weight: 700; 
      padding: 4px 10px; 
      border-radius: 4px; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
      font-family: 'Space Grotesk', monospace;
  }

  .audit-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed rgba(255,255,255,0.1);
  }
  .audit-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  
  .ar-label { font-size: 0.9rem; color: #94A3B8; font-weight: 500; }
  .ar-val { font-size: 1.1rem; color: #fff; font-weight: 700; font-family: 'Space Grotesk', monospace; }
  
  .ar-alert { color: #FF5F56; }
  .ar-success { color: #22C55E; }
  .wp-blue-icon { color: #385EFF; }

  /* Scanner Effect */
  .scan-beam {
    position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #385EFF;
    box-shadow: 0 0 20px #385EFF;
    animation: scanDoc 3s infinite linear;
    opacity: 0.8;
    pointer-events: none;
    z-index: 10;
    will-change: top, opacity;
  }

  /* --- RIGHT: Content --- */
  .final-content {
    flex: 1.2;
    text-align: left;
  }

  .final-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(56, 94, 255, 0.1);
    border: 1px solid rgba(56, 94, 255, 0.3);
    border-radius: 50px;
    color: #385EFF;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }

  .final-title {
    font-family: 'Mona Sans', sans-serif;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 24px;
    color: #fff;
  }
  
  .text-highlight { 
      background: linear-gradient(135deg, #28CCCD 0%, #385EFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }

  .final-desc {
    font-size: 1.1rem;
    color: #94A3B8;
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 90%;
  }

  .final-btn-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }

  .final-btn-primary {
    background: #385EFF;
    color: #fff;
    padding: 18px 36px;
    border-radius: 8px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 800;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
  }
  .final-btn-primary:hover { 
      transform: translateY(-3px); 
      box-shadow: 0 10px 30px rgba(56, 94, 255, 0.4); 
      background: #2b4bcf;
  }

  .final-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 18px 36px;
    border-radius: 8px;
    font-family: 'Mona Sans', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  .final-btn-outline:hover { background: rgba(255, 255, 255, 0.05); border-color: #fff; }

  /* ANIMATIONS */
  @keyframes scanDoc {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  /* RESPONSIVE */
  @media (max-width: 1024px) {
    .final-container { flex-direction: column; text-align: center; padding: 60px 40px; gap: 60px; }
    .final-content { text-align: center; display: flex; flex-direction: column; align-items: center; }
    .final-btn-row { justify-content: center; }
    .report-visual { width: 100%; max-width: 400px; }
    .final-desc { max-width: 100%; }
  }
  
  @media (max-width: 600px) {
    #wp-final-cta { padding: 80px 20px; }
    .final-container { padding: 40px 24px; border-radius: 24px; }
    .final-title { font-size: 2.2rem; }
    .final-btn-primary, .final-btn-outline { width: 100%; justify-content: center; }
  }