@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}

  /* ─── Section Variables ─────────────────────────── */
  .zt-compare-section {
    --zt-brand:        #4782A2;
    --zt-brand-mid:    #3a6d8a;
    --zt-brand-deep:   #2d5570;
    --zt-brand-light:  #6ba3bf;
    --zt-brand-pale:   #e8f2f8;
    --zt-brand-glow:   rgba(71,130,162,0.18);

    --zt-manual-bg:    #fff7f5;
    --zt-manual-head:  #c0392b;
    --zt-ocr-bg:       #fffdf0;
    --zt-ocr-head:     #d68910;

    --zt-text-dark:    #1a2b38;
    --zt-text-mid:     #4a5e6b;
    --zt-text-light:   #7a9bac;
    --zt-row-odd:      rgba(248,251,253,0.7);
    --zt-row-even:     rgba(255,255,255,0.9);
    --zt-border:       rgba(71,130,162,0.12);

    --zt-radius:       18px;
    --zt-col-radius:   14px;

    position: relative;
    padding: 90px 0 100px;
    overflow: hidden;
    background: #f0f6fa;
    font-family: 'Figtree', sans-serif;
    margin: 0px 0 0 30px;
    border-radius: 40px;
  }


/* ── BACKGROUND ── */
.zt-bg {
  position:absolute;inset:0;
  background: linear-gradient(135deg, #e8f4fb 0%, #f5fafd 40%, #eaf2f8 70%, #d6eaf5 100%);
  z-index:0;
}
.zt-bg::before {
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 700px 400px at 10% 20%, rgba(71,130,162,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 500px 500px at 90% 80%, rgba(42,92,122,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 300px 300px at 55% 50%, rgba(122,184,212,0.08) 0%, transparent 65%);
}

/* animated diagonal lines */
.zt-lines {
  position:absolute;inset:0;overflow:hidden;z-index:0;opacity:0.25;
}
.zt-lines::before {
  content:'';position:absolute;inset:-200px;
  background: repeating-linear-gradient(
    -55deg,
    transparent,
    transparent 60px,
    rgba(71,130,162,0.07) 60px,
    rgba(71,130,162,0.07) 61px
  );
  animation: linesDrift 30s linear infinite;
}
@keyframes linesDrift { from{transform:translateX(0)} to{transform:translateX(120px)} }

/* floating orbs */
.zt-orb {
  position:absolute;border-radius:50%;filter:blur(60px);
  animation:orbPulse ease-in-out infinite alternate;
}
.zt-orb-1{width:420px;height:420px;background:rgba(71,130,162,0.12);top:-80px;left:-80px;animation-duration:13s;}
.zt-orb-2{width:300px;height:300px;background:rgba(45,98,133,0.09);bottom:-60px;right:-40px;animation-duration:9s;animation-delay:-4s;}
.zt-orb-3{width:200px;height:200px;background:rgba(122,184,212,0.11);top:50%;left:65%;animation-duration:15s;animation-delay:-7s;}
@keyframes orbPulse {
  from{transform:translate(0,0) scale(1);}
  to{transform:translate(20px,-25px) scale(1.1);}
}

/* sparkle dots */
.zt-dot {
  position:absolute;border-radius:50%;
  background:rgba(71,130,162,0.35);
  animation:dotBlink ease-in-out infinite;
}
@keyframes dotBlink {
  0%,100%{opacity:0;transform:scale(0.5);}
  50%{opacity:1;transform:scale(1);}
}

  /* Flowing top accent */
  .zt-top-wave {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg,
      transparent 0%,
      var(--zt-brand-light) 20%,
      var(--zt-brand) 50%,
      var(--zt-brand-mid) 80%,
      transparent 100%);
    background-size: 200% 100%;
    animation: zt-wave-slide 4s ease-in-out infinite alternate;
  }
  @keyframes zt-wave-slide {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 0%; }
  }

  /* ─── Container ─────────────────────────────────── */
  .zt-compare-section .container-wide {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
  }

  /* ─── Section Header ────────────────────────────── */
    .zt-header{position:relative;z-index:2;text-align:center;margin-bottom:52px;}
    .zt-eyebrow{
      font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;
      letter-spacing:4px;text-transform:uppercase;color:#4782A2;
      display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px;
    }
    .zt-eyebrow span{display:inline-block;width:36px;height:1.5px;background:linear-gradient(90deg,transparent,#4782A2);}
    .zt-eyebrow span:last-child{background:linear-gradient(90deg,#4782A2,transparent);}
    .zt-title{
      font-family:'Plus Jakarta Sans',sans-serif;
      font-size:clamp(26px,3.8vw,42px);font-weight:900;
      color:#0a2033;line-height:1.12;margin-bottom:14px;
    }
    .zt-title em{font-style:normal;color:#4782A2;}
    .zt-subtitle{
      font-family:'DM Sans',sans-serif;font-size:15.5px;color:#5a7f96;
      max-width:520px;margin:0 auto;line-height:1.65;font-weight:400;
    }

  /* ─── Table Wrapper ─────────────────────────────── */
  .zt-table-wrapper {
    overflow-x: auto;
    border-radius: var(--zt-radius);
    box-shadow:
      0 2px 6px rgba(0,0,0,0.04),
      0 12px 40px rgba(71,130,162,0.10),
      0 1px 0 rgba(255,255,255,0.8) inset;
  }

  /* ─── Table ─────────────────────────────────────── */
  .zt-compare-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    border-radius: var(--zt-radius);
    overflow: hidden;
  }

  /* ─── Header Row ────────────────────────────────── */
  .zt-compare-table thead tr {
    background: transparent;
  }

  .zt-th {
    padding: 0;
    border-bottom: 2px solid var(--zt-border);
    vertical-align: bottom;
  }

  /* Capability column header */
  .zt-th-capability {
    width: 22%;
  }
  .zt-th-capability .zt-th-inner {
    background: linear-gradient(135deg, #89bde6 0%, #1c4463 100%);
    padding: 50px 30px 22px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 120px;
    border-radius: var(--zt-col-radius) 0 0 0;
    justify-content: center;
  }
  .zt-th-capability .zt-th-label {
    font-family: 'Syne', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.04em;
  }
  .zt-th-capability .zt-th-sub {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin-top: 4px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* Manual column header */
  .zt-th-manual .zt-th-inner {
    background: linear-gradient(135deg, #fff7f5 0%, #fdecea 100%);
    border-left: 1px solid rgba(192,57,43,0.10);
    padding: 35px 20px 22px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .zt-th-manual .zt-col-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c0392b;
    background: rgba(192,57,43,0.10);
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
    width: fit-content;
  }
  .zt-th-manual .zt-th-label {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #c0392b;
  }

  /* OCR column header */
  .zt-th-ocr .zt-th-inner {
    background: linear-gradient(135deg, #fffdf0 0%, #fef9e1 100%);
    border-left: 1px solid rgba(214,137,16,0.10);
    padding: 35px 20px 22px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .zt-th-ocr .zt-col-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #d68910;
    background: rgba(214,137,16,0.10);
    padding: 4px 10px;
    border-radius: 100px;
    margin-bottom: 10px;
    width: fit-content;
  }
  .zt-th-ocr .zt-th-label {
    font-family: 'Syne', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #b7770d;
  }

  /* ZeroTouch AI column header — brand hero */
  .zt-th-zt {
    position: relative;
  }
  .zt-th-zt .zt-th-inner {
    background: linear-gradient(145deg,
      var(--zt-brand-deep) 0%,
      var(--zt-brand) 45%,
      var(--zt-brand-light) 100%);
    border-left: 1px solid rgba(255,255,255,0.15);
    padding: 20px 22px 22px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 0 var(--zt-col-radius) 0 0;
    position: relative;
    overflow: hidden;
  }
  /* Shimmer on ZT header */
  .zt-th-zt .zt-th-inner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
      transparent 30%,
      rgba(255,255,255,0.14) 50%,
      transparent 70%);
    background-size: 200% 100%;
    animation: zt-header-shimmer 3.5s ease-in-out infinite;
  }
  @keyframes zt-header-shimmer {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
  }

  .zt-th-zt .zt-col-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    padding: 4px 10px;
    border-radius: 100px;
      margin-bottom: 10px;
    margin-left: 70px;
    width: fit-content;
    position: relative;
    z-index: 1;
  }
  .zt-th-zt .zt-th-label {
    font-family: "Figtree", sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    position: relative;
    z-index: 1;
    margin-left: 80px;
  }
  .zt-th-zt .zt-stp-pill {
    margin-top: 8px;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--zt-brand-deep);
    background: #fff;
    padding: 3px 10px;
    border-radius: 100px;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    animation: zt-pulse-pill 2.5s ease-in-out infinite;
  }
  @keyframes zt-pulse-pill {
    0%, 100% { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
    50%       { box-shadow: 0 2px 16px rgba(71,130,162,0.5); }
  }

  /* ─── Body Rows ─────────────────────────────────── */
  .zt-compare-table tbody tr {
    transition: background 0.22s ease;
  }
  .zt-compare-table tbody tr:nth-child(odd)  { background: var(--zt-row-odd); }
  .zt-compare-table tbody tr:nth-child(even) { background: var(--zt-row-even); }
  .zt-compare-table tbody tr:hover {
    background: rgba(71,130,162,0.06) !important;
  }
  .zt-compare-table tbody tr:hover .zt-td-zt {
    background: linear-gradient(135deg,
      rgba(45,85,112,0.97) 0%,
      rgba(71,130,162,0.97) 60%,
      rgba(107,163,191,0.97) 100%) !important;
  }

  /* last row rounded bottom */
  .zt-compare-table tbody tr:last-child .zt-td-capability { border-radius: 0 0 0 var(--zt-col-radius); }
  .zt-compare-table tbody tr:last-child .zt-td-zt          { border-radius: 0 0 var(--zt-col-radius) 0; }

  /* ─── Body Cells ────────────────────────────────── */
  .zt-td {
    padding: 15px 20px;
    font-size: 14px;
    line-height: 1.55;
    border-bottom: 1px solid var(--zt-border);
    vertical-align: middle;
    color: var(--zt-text-mid);
    border-right: 1px solid var(--zt-border);
  }
  .zt-compare-table tbody tr:last-child .zt-td {
    border-bottom: none;
  }

  /* Capability cell */
  .zt-td-capability {
    background: linear-gradient(135deg, rgba(26,43,56,0.04) 0%, transparent 100%);
    color: var(--zt-text-dark);
    font-weight: 600;
    font-size: 13.5px;
    border-right: 2px solid rgba(71,130,162,0.15);
    padding-left: 24px;
    letter-spacing: 0.01em;
  }

  /* Manual cell */
  .zt-td-manual {
    background: rgba(255,247,245,0.5);
  }
  .zt-td-manual .zt-negative {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #c0392b;
    font-weight: 500;
  }
  .zt-td-manual .zt-negative::before {
    content: '✕';
    font-size: 10px;
    font-weight: 800;
    color: #c0392b;
    background: rgba(192,57,43,0.10);
    width: 18px; height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  /* OCR cell */
  .zt-td-ocr {
    background: rgba(255,253,240,0.5);
  }
  .zt-td-ocr .zt-partial {
    color: #b7770d;
    font-weight: 500;
  }

  /* ZeroTouch AI cell — full brand column */
  .zt-td-zt {
    background: linear-gradient(135deg,
      rgba(45,85,112,0.92) 0%,
      rgba(71,130,162,0.92) 60%,
      rgba(107,163,191,0.90) 100%);
    color: #fff !important;
    font-weight: 600;
    border-right: none;
    position: relative;
    overflow: hidden;
    transition: background 0.3s ease;
  }
  /* Subtle interior shimmer on ZT cells */
  .zt-td-zt::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
      rgba(255,255,255,0.04) 0%,
      transparent 60%);
    pointer-events: none;
  }

  .zt-td-zt .zt-positive {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-weight: 600;
    position: relative;
    z-index: 1;
  }
  .zt-td-zt .zt-positive .zt-check {
    width: 20px; height: 20px;
    background: rgba(255,255,255,0.22);
    border: 1.5px solid rgba(255,255,255,0.40);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    color: #fff;
  }

  /* Row entry animation */
  .zt-compare-table tbody tr {
    opacity: 0;
    transform: translateY(12px);
    animation: zt-row-enter 0.45s ease forwards;
  }
  .zt-compare-table tbody tr:nth-child(1)  { animation-delay: 0.10s; }
  .zt-compare-table tbody tr:nth-child(2)  { animation-delay: 0.17s; }
  .zt-compare-table tbody tr:nth-child(3)  { animation-delay: 0.24s; }
  .zt-compare-table tbody tr:nth-child(4)  { animation-delay: 0.31s; }
  .zt-compare-table tbody tr:nth-child(5)  { animation-delay: 0.38s; }
  .zt-compare-table tbody tr:nth-child(6)  { animation-delay: 0.45s; }
  .zt-compare-table tbody tr:nth-child(7)  { animation-delay: 0.52s; }
  .zt-compare-table tbody tr:nth-child(8)  { animation-delay: 0.59s; }
  .zt-compare-table tbody tr:nth-child(9)  { animation-delay: 0.66s; }
  @keyframes zt-row-enter {
    to { opacity: 1; transform: translateY(0); }
  }

  /* ─── Footer Callout ────────────────────────────── */
  .zt-footer-callout {
    margin-top: 36px;
    text-align: center;
  }
  .zt-footer-callout .zt-callout-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--zt-brand-deep) 0%, var(--zt-brand) 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 14px 28px;
    border-radius: 100px;
    box-shadow:
      0 4px 20px rgba(71,130,162,0.35),
      0 1px 0 rgba(255,255,255,0.15) inset;
    animation: zt-callout-float 3.5s ease-in-out infinite alternate;
  }
  .zt-callout-pill .zt-bolt {
    font-size: 16px;
    animation: zt-bolt-glow 1.5s ease-in-out infinite alternate;
  }
  @keyframes zt-callout-float {
    0%   { transform: translateY(0);    box-shadow: 0 4px 20px rgba(71,130,162,0.35); }
    100% { transform: translateY(-4px); box-shadow: 0 10px 32px rgba(71,130,162,0.45); }
  }
  @keyframes zt-bolt-glow {
    0%   { text-shadow: none; }
    100% { text-shadow: 0 0 12px rgba(255,220,60,0.9); }
  }

  /* ─── Responsive ────────────────────────────────── */
  @media (max-width: 900px) {
    .zt-compare-section { padding: 60px 0 70px; }
    .zt-section-header { margin-bottom: 36px; }
    .zt-th-capability .zt-th-inner,
    .zt-th-manual .zt-th-inner,
    .zt-th-ocr .zt-th-inner,
    .zt-th-zt .zt-th-inner { min-height: 90px; padding: 14px 14px 16px; }
    .zt-th-zt .zt-th-label { font-size: 13px; }
    .zt-td { padding: 12px 14px; font-size: 13px; }
    .zt-td-capability { padding-left: 14px; }
  }