.hero-lab-testing, .stats, .section,
.hero-lab-testing h1, .hero-lab-testing h2, .hero-lab-testing h3, .hero-lab-testing h4, .hero-lab-testing h5, .hero-lab-testing h6,
.hero-lab-testing p, .hero-lab-testing a, .hero-lab-testing span, .hero-lab-testing li, .hero-lab-testing div, .hero-lab-testing button,
.stats h1, .stats h2, .stats h3, .stats h4, .stats h5, .stats h6,
.stats p, .stats a, .stats span, .stats li, .stats div, .stats button,
.section h1, .section h2, .section h3, .section h4, .section h5, .section h6,
.section p, .section a, .section span, .section li, .section div, .section button { font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
.container { max-width: 1400px; margin: 0 auto; padding: 0 32px; }
.text-gradient { background: linear-gradient(90deg, #37D7FA 0%, #4B72FE 50%, #FF8DF2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bg-new-grad { background: linear-gradient(90deg, #37D7FA 0%, #4B72FE 50%, #FF8DF2 100%); }
.btn { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 16px; padding: 0 40px !important; height: 56px !important; border-radius: 9999px !important; cursor: pointer; transition: opacity 0.2s; text-decoration: none; border: none; }
.btn-primary { background: linear-gradient(90deg, #00D3F3 0%, #2B7FFF 50%, #9810FA 100%) !important; color: #fff; box-shadow: 0 4px 14px rgba(12,197,237,0.35); position: relative; overflow: hidden; }
.btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 70%, transparent 100%); animation: shimmer 3s ease-in-out infinite; }
@keyframes shimmer { 0% { left: -100%; } 50%,100% { left: 120%; } }
.btn-primary:hover { opacity: 0.9; }
.btn-outline { background: transparent; color: #1e2a3a; border: 1px solid #e2e6eb; }
.btn-outline:hover { background: #f4f6f8; }
.btn-round { border-radius: 9999px; }

/* Animations */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-left { opacity: 0; transform: translateX(-20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-left.visible { opacity: 1; transform: translateX(0); }
.fade-right { opacity: 0; transform: translateX(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-right.visible { opacity: 1; transform: translateX(0); }

/* ━━━ HERO ━━━ */
.hero-lab-testing { padding: 128px 0 96px; text-align: center; position: relative; overflow: hidden; }
.hero-lab-testing::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; border-radius: 50%; background: rgba(12,197,237,0.05); filter: blur(80px); pointer-events: none; }
.hero-lab-testing .container { position: relative; }
.hero-label { font-size: 17px; font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 24px; }
.hero-lab-testing h1 { font-size: clamp(40px, 5vw, 64px); font-weight: 800; line-height: 1.08; max-width: 800px; margin: 0 auto 28px; }
.hero-lab-testing p { font-size: 18px; color: #6b7a8d; max-width: 640px; margin: 0 auto 40px; }
.hero-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-bottom: 40px; }
.hero-badges .lab-badge { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hero-badges .lab-badge svg { width: 16px; height: 16px; color: #0cc5ed; }
.hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* ━━━ STATS ━━━ */
.stats { padding: 64px 0; border-top: 1px solid #e2e6eb; border-bottom: 1px solid #e2e6eb; background: aliceblue; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { text-align: center; }
.stat-value { font-size: clamp(28px, 3vw, 40px); font-weight: 800; margin-bottom: 4px; }
.stat-label { font-size: 14px; color: #6b7a8d; font-weight: 500; }

/* ━━━ CARD GRID ━━━ */
.section { padding: 96px 0; }
.section.alt { background: #f4f6f8; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-header h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; margin-bottom: 16px; }
.section-header p { font-size: 18px; color: #6b7a8d; max-width: 640px; margin: 0 auto; }
.card-grid { display: grid; gap: 20px; }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card { border-radius: 16px; border: 1px solid #e2e6eb; background: #ffffff; padding: 32px; box-shadow: 0 4px 24px rgba(30,42,58,0.06); transition: box-shadow 0.3s; text-align: left !important; }
.card:hover { box-shadow: 0 8px 32px rgba(12,197,237,0.12); }
.card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: rgba(12,197,237,0.1); margin-bottom: 20px; }
.card-icon svg { width: 20px; height: 20px; color: #0cc5ed; }
.card h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; text-align: left !important; }
.card p { font-size: 16px; color: #6b7a8d; line-height: 1.6; text-align: left !important; }
.card-center { text-align: left; }
.card-center h3 { text-align: left !important; }
.card-center p { text-align: left !important; }
.card-center .card-icon { width: 48px; height: 48px; border-radius: 12px; margin: 0 0 20px 0; }
.card-center .card-icon svg { width: 24px; height: 24px; }

/* ━━━ HOW IT WORKS ━━━ */
.step-card { position: relative; }
.step-number { font-size: 20px; font-weight: 800; color: #0cc5ed; user-select: none; }

/* ━━━ DIY COMPARISON ━━━ */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1000px; margin: 0 auto; }
.compare-card { border-radius: 16px; background: #ffffff; padding: 32px; text-align: left !important; }
.compare-card.pain { border: 1px solid rgba(239,68,68,0.3); }
.compare-card.benefit { border: 1px solid rgba(12,197,237,0.3); }
.compare-card h3 { font-weight: 700; font-size: 18px; margin-bottom: 24px; display: flex; align-items: center; gap: 8px; text-align: left !important; }
.compare-card ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.compare-card li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; color: #6b7a8d; text-align: left !important; }
.compare-card li svg { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.compare-card.pain li svg { color: #ef4444; }
.compare-card.benefit li svg { color: #0cc5ed; }

/* ━━━ DATA FLOW ━━━ */
.flow-box { border-radius: 16px; border: 1px solid #e2e6eb; background: #ffffff; padding: 32px; box-shadow: 0 4px 24px rgba(30,42,58,0.06); max-width: 800px; margin: 0 auto; }
.flow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.flow-grid h3 { font-size: 17px !important; font-weight: 700 !important; margin-bottom: 10px !important; color: #1e2a3a !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
.flow-grid p { font-size: 15px !important; color: #6b7a8d !important; line-height: 1.6 !important; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
.flow-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(12,197,237,0.1); margin-bottom: 16px; }
.flow-icon svg { width: 32px; height: 32px; color: #0cc5ed; }
.flow-footer { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e2e6eb; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.flow-footer span { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7a8d; }
.flow-footer svg { width: 16px; height: 16px; color: #0cc5ed; }

/* ━━━ COMPARISON TABLE ━━━ */
.table-wrap { border-radius: 16px; border: 1px solid #e2e6eb; background: #ffffff; box-shadow: 0 4px 24px rgba(30,42,58,0.06); overflow: hidden; max-width: 800px; margin: 0 auto; }
.table-header { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 16px 24px; background: #f4f6f8; border-bottom: 1px solid #e2e6eb; font-weight: 700; font-size: 14px; }
.table-header span:nth-child(2), .table-header span:nth-child(3) { text-align: center; }
.table-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 14px 24px; font-size: 14px; border-bottom: 1px solid #e2e6eb; }
.table-row:last-child { border-bottom: none; }
.table-row span:first-child { font-weight: 500; }
.table-row span:nth-child(2) { text-align: center; font-weight: 500; color: #0cc5ed; }
.table-row span:nth-child(3) { text-align: center; color: #6b7a8d; }



/* ━━━ SVG ICONS (inline) ━━━ */
svg.icon { display: inline-block; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ━━━ COMPARISON SECTION (new) ━━━ */
.comparison-section { padding: 96px 0; font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important; }
.comparison-container { max-width: 1280px; margin: 0 auto; border-radius: 24px; border: 1px solid hsl(210 20% 91%); background: hsl(0 0% 100%); padding: 32px; box-shadow: 0 4px 24px hsl(220 25% 14% / 0.06); }
@media (min-width: 768px) { .comparison-container { padding: 56px; } }
.comparison-header { text-align: center; margin-bottom: 40px; }
.comparison-label { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; background: linear-gradient(90deg, #37D7FA 0%, #4B72FE 50%, #FF8DF2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 12px; display: block; }
.comparison-title { font-size: 30px; font-weight: 800; color: hsl(220 25% 14%); margin-bottom: 16px; }
@media (min-width: 768px) { .comparison-title { font-size: 36px; } }
.comparison-title .gradient { background: linear-gradient(90deg, #37D7FA 0%, #4B72FE 50%, #FF8DF2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.comparison-subtitle { color: hsl(220 10% 50%); max-width: 672px; margin: 0 auto; font-size: 18px; }
.tab-headers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; max-width: 896px; margin-left: auto; margin-right: auto; }
.tab-diy { border-radius: 12px; border: 1px solid hsl(210 20% 91%); background: hsl(210 20% 96% / 0.6); padding: 12px 24px; text-align: center; }
.tab-diy span { font-weight: 700; color: hsl(220 25% 14%); font-size: 14px; }
.tab-solution { border-radius: 12px; padding: 12px 24px; text-align: center; background: #1b2941; }
.tab-solution span { font-weight: 700; color: hsl(0 0% 100%); font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.comparison-grid { display: grid; gap: 16px; max-width: 896px; margin: 0 auto; }
@media (min-width: 768px) { .comparison-grid { grid-template-columns: repeat(2, 1fr); } }
.col-diy { border-radius: 16px; border: 1px solid hsl(210 20% 91%); background: hsl(210 20% 96% / 0.3); padding: 24px; }
.col-diy h3 { font-weight: 700; color: hsl(220 25% 14%); font-size: 14px; margin-bottom: 20px; }
.col-diy ul { display: flex; flex-direction: column; gap: 16px; list-style: none; }
.col-diy li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: hsl(220 10% 50%); }
.icon-x { margin-top: 2px; flex-shrink: 0; width: 20px; height: 20px; border-radius: 9999px; border: 1px solid hsl(0 84% 60% / 0.4); display: flex; align-items: center; justify-content: center; color: hsl(0 84% 60%); }
.col-solution { border-radius: 16px; padding: 24px; background: #1b2941; color: hsl(0 0% 100%); }
.col-solution h3 { font-weight: 700; font-size: 14px; margin-bottom: 20px; color: #93c5fd; }
.col-solution ul { display: flex; flex-direction: column; gap: 16px; list-style: none; }
.col-solution li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: hsl(0 0% 100% / 0.9); }
.icon-check { margin-top: 2px; flex-shrink: 0; width: 20px; height: 20px; border-radius: 9999px; background: hsl(217 91% 60% / 0.3); display: flex; align-items: center; justify-content: center; color: #93c5fd; }

/* ━━━ DATA FLOW (new) ━━━ */
/* Header */
  .section-title {
    font-size: clamp(30px, 4vw, 36px);
    font-weight: 800;
    margin-bottom: 16px;
    line-height: 1.2;
  }
  .section-desc {
    color: hsl(220 10% 50%);
    max-width: 640px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
  }

  /* Card */
  .flow-card {
    max-width: 896px;
    margin: 0 auto;
    border-radius: 16px;
    border: 1px solid hsl(210 20% 91% / 0.6);
    background: hsl(0 0% 100%);
    padding: 40px 56px;
    box-shadow: 0 4px 24px hsl(220 25% 14% / 0.06);
  }

  /* Grid */
  .flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: start;
  }
  @media (max-width: 768px) {
    .flow-grid { grid-template-columns: 1fr; gap: 32px; }
    .flow-card { padding: 32px 24px; }
  }

  /* Step */
  .flow-step {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .flow-step img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    margin-bottom: 24px;
  }
  .flow-step h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
  }
  .flow-step p {
    font-size: 14px;
    color: hsl(220 10% 50%);
    line-height: 1.6;
    max-width: 240px;
  }

  /* Security badges */
  .security-badges {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid hsl(210 20% 91% / 0.4);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 32px;
  }
  .badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: hsl(220 10% 50%);
  }
  .badge svg {
    width: 16px;
    height: 16px;
    color: hsl(191 90% 50% / 0.7);
    flex-shrink: 0;
  }

/* ━━━ COMPETITOR TABLE (new) ━━━ */
.comp-table { border-radius: 16px; border: 1px solid #e4e8ed; background: #ffffff; box-shadow: 0 4px 24px rgba(28,37,54,0.06); overflow: hidden; max-width: 960px; margin: 0 auto; }
.comp-table .header { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 20px 32px; background: #1b2941; }
.comp-table .header span { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.comp-table .header span:first-child { color: rgba(191,219,254,0.7); }
.comp-table .header span:nth-child(2) { text-align: center; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; }
.comp-table .header span:nth-child(3) { text-align: center; color: rgba(191,219,254,0.7); }
.comp-table .row { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; padding: 16px 32px; transition: background 0.15s; }
.comp-table .row:hover { background: rgba(244,246,248,0.4); }
.comp-table .row:not(:last-child) { border-bottom: 1px solid rgba(228,232,237,0.6); }
.comp-table .row:nth-child(even) { background: #ffffff; }
.comp-table .row:nth-child(odd) { background: rgba(244,246,248,0.2); }
.comp-table .row span { font-size: 14px; }
.comp-table .row span:first-child { font-weight: 600; color: #1c2536; }
.comp-table .row span:nth-child(2), .comp-table .row span:nth-child(3) { text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
.comp-table .row span:nth-child(2) { font-weight: 500; color: #1c2536; }
.comp-table .row span:nth-child(3) { color: #6b7a90; }

/* ━━━ RESPONSIVE ━━━ */
@media (max-width: 1024px) {
  .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .card-grid.cols-3, .card-grid.cols-2, .compare-grid { grid-template-columns: 1fr; }
  .flow-grid { grid-template-columns: 1fr; }
  .table-header, .table-row { font-size: 12px; padding: 12px 16px; }
  .comparison-grid { grid-template-columns: 1fr; }
  .tab-headers { grid-template-columns: 1fr; }
  .comp-table .header, .comp-table .row { grid-template-columns: 1.4fr 1fr 1fr; padding: 12px 16px; font-size: 13px; }
  .comparison-container { padding: 24px; }
}
@media (max-width: 640px) {
  .card-grid.cols-4 { grid-template-columns: 1fr; }
  .hero-lab-testing h1 { font-size: 32px; }
}