body {
        font-family: 'Inter', sans-serif;
        background-color: #020617;
        color: #f1f5f9;
        scroll-behavior: smooth;
      }

      .brochure-btn {
        position: fixed;
        top: 20%;
        right: 0px;
        /* pulls it outside */
        transform: rotate(-90deg) translateY(-50%);
        transform-origin: right center;
        background-color: #e63946;
        color: #fff;
        padding: 12px 24px;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
        letter-spacing: 1px;
        border-radius: 8px 8px 0px 0px;
        z-index: 1000;
        transition: background 0.3s;
      }

      .brochure-btn:hover {
        background-color: #c92d3a;
      }

      /*request callback box*/
      /* Callback Button */
      .callback-btn {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: #007bff;
        color: #fff;
        padding: 12px 18px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        z-index: 9999;
      }

      /* Modal Background */
      .modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 10000;
      }

      /* Modal Box */
      .modal-content {
        background: rgb(15 23 42 / 1);
        padding: 25px;
        border-radius: 8px;
        width: 90%;
        max-width: 400px;
        text-align: left;
        position: relative;
      }

      /* Close Button */
      .close-btn {
        position: absolute;
        top: 8px;
        right: 10px;
        font-size: 22px;
        cursor: pointer;
      }

      /* Form Inputs */
      .modal-content input {
        width: 100%;
        padding: 10px;
        margin: 8px 0;
        border: 1px solid #aaa;
        border-radius: 4px;
        background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
      }

      /* Submit Button */
      .modal-content button[type="submit"] {
        background: rgb(37 99 235 / var(--tw-bg-opacity, 1));
        color: white;
        border: none;
        padding: 11px 14px;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;
      }

      /* Success Message */
      .success-msg {
        font-size: 18px;
        color: green;
      }

      /* Glass effect */
      .glass {
        background: rgba(255, 255, 255, 1%) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 3px solid rgba(255, 255, 255, 0.3) !important;
        color: #fff;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
        transition: background 0.3s, box-shadow 0.3s;
      }

      .glass:hover {
        background: rgba(255, 255, 255, 0.35);
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
      }

      /*MENU BUTTON FLOATING*/
      .fab-container {
        position: fixed;
        bottom: 0px;
        right: 0px;
        z-index: 1000;
      }

      .fab-main {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: none;
        /*background: linear-gradient(135deg, #111, #333);*/
        color: #fff;
        cursor: pointer;
        /*box-shadow: 0 10px 30px rgba(0,0,0,0.4);*/
      }

      .fab-sub {
        position: absolute;
        right: 8px;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transform: translateY(10px) scale(0.5);
        transition: all 0.3s ease;
      }

      .fab-sub.whatsapp {
        bottom: 20px;
        background: #25d366;
        color: #fff;
      }

      .fab-sub.call {
        bottom: 70px;
        background: #0a66c2;
        color: #fff;
      }

      .fab-container.active .fab-sub {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      /*3dmodel*/
      @keyframes hero-float {

        0%,
        100% {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-10px);
        }
      }

      .hero-model {
        animation: hero-float 7s ease-in-out infinite;
      }

      .toggle-btn {
        @apply px-5 py-2 rounded-lg border border-slate-700 text-slate-300 hover: bg-slate-800 transition;
      }

      .toggle-btn.active {
        @apply bg-blue-600 text-white border-blue-600;
      }

      .btn-primary {
        @apply px-4 py-2 bg-blue-600 text-white rounded-lg font-semibold hover: bg-blue-700 transition;
      }

      .product-card {
        @apply bg-slate-900 border border-slate-800 rounded-xl p-4;
      }

      .product-title {
        @apply text-white font-semibold cursor-pointer;
      }

      .product-list {
        @apply mt-4 space-y-2 text-slate-300;
      }

      /* Section */
      .products {
        padding: 80px 0;
        background: #020617;
      }

      .section-title {
        text-align: center;
        font-size: 2.2rem;
        margin-bottom: 40px;
        color: #f8fafc;
      }

      /* Card */
      .comparison-wrapper {
        display: flex;
        justify-content: center;
      }

      .comparison-card {
        background: #0f172a;
        border-radius: 18px;
        padding: 24px;
        width: 100%;
        max-width: 1100px;
        border: 1px solid #1e293b;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
      }

      /* Table */
      .table-scroll {
        overflow-x: auto;
      }

      .comparison-table {
        width: 100%;
        border-collapse: collapse;
        min-width: 720px;
      }

      .comparison-table th,
      .comparison-table td {
        padding: 16px 18px;
        text-align: left;
        color: #e5e7eb;
      }

      .comparison-table thead th {
        background: #020617;
        position: sticky;
        top: 0;
        z-index: 2;
        font-weight: 600;
      }

      .comparison-table tbody tr {
        border-bottom: 1px solid #1e293b;
      }

      .comparison-table tbody tr:hover {
        background: rgba(30, 41, 59, 0.35);
      }

      /* CTA buttons */
      .cta-row td {
        text-align: center;
      }

      .btn-link {
        display: inline-block;
        padding: 10px 18px;
        background: #2563eb;
        color: #fff;
        border-radius: 8px;
        font-weight: 600;
        text-decoration: none;
        transition: background 0.3s ease;
      }

      .btn-link:hover {
        background: #1d4ed8;
      }

      /* Mobile Optimizations */
      @media (max-width: 768px) {
        .section-title {
          font-size: 1.8rem;
        }

        .comparison-card {
          padding: 16px;
        }

        .comparison-table th,
        .comparison-table td {
          padding: 14px;
          font-size: 0.95rem;
        }
      }

      model-viewer {
        will-change: transform;
      }

      @media (max-width: 768px) {
        .hero-model {
          height: 300px;
        }
      }

      /* DATA FLOW BAR ANIMATION */
      @keyframes flow-horizontal {
        0% {
          transform: translateX(-50%);
        }

        100% {
          transform: translateX(100vw);
        }
      }

      @keyframes blocked-horizontal {
        0% {
          transform: translateX(80%);
          opacity: 0;
        }

        40%,
        60% {
          transform: translateX(-100%) scaleX(1.2);
          opacity: 1;
        }

        100% {
          transform: translateX(-100%);
          opacity: 0;
        }
      }

      .animate-flow {
        animation: flow-horizontal 2.2s linear infinite;
      }

      .animate-flow1 {
        animation: flow-horizontal 2.2s linear infinite 0.7s;
      }

      .animate-flow2 {
        animation: flow-horizontal 2.2s linear infinite 1.4s;
      }

      .animate-blocked {
        animation: blocked-horizontal 2.2s ease-in-out infinite;
      }

      .data-flow-sticky {
        position: sticky;
        top: 98px;
        z-index: 40;
        background: #020617;
        border-bottom: 1px solid #0f172a;
      }

      .flow-track {
        position: relative;
        height: 3px;
        background: #020617;
        border-radius: 999px;
        overflow: hidden;
        width: 100%;
      }

      .flow-red {
        position: absolute;
        right: 0;
        height: 3px;
        width: 20px;
        background: #ef4444;
        animation: blocked-horizontal 2.2s ease-in-out infinite;
      }

      /* SCROLL ANIMATIONS */
      .scroll-fade {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.8s ease-out;
      }

      .scroll-fade.visible {
        opacity: 1;
        transform: translateY(0);
      }

      .scroll-slide-left {
        opacity: 0;
        transform: translateX(-50px);
        transition: all 0.8s ease-out;
      }

      .scroll-slide-left.visible {
        opacity: 1;
        transform: translateX(0);
      }

      .scroll-slide-right {
        opacity: 0;
        transform: translateX(50px);
        transition: all 0.8s ease-out;
      }

      .scroll-slide-right.visible {
        opacity: 1;
        transform: translateX(0);
      }

      #kavach-container {
        position: fixed;
        bottom: 20px;
        right: 10px;
        z-index: 9999;
        font-family: Inter, sans-serif;
      }

      /* Floating Button */
      #kavach-btn {
        position: fixed;
        bottom: 0px;
        right: 0px;
        /*background: #020617;*/
        color: #e5e7eb;
        /*border: 1px solid #1e293b;*/
        padding: 12px 16px;
        border-radius: 999px;
        cursor: pointer;
        font-weight: 600;
      }

      /* Chat Box floats ABOVE the button */
      #kavach-chat {
        position: fixed;
        bottom: 100px;
        /* 👈 key line */
        right: 20px;
        display: none;
        width: 320px;
        height: 420px;
        background: #020617;
        border: 1px solid #1e293b;
        border-radius: 14px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        overflow: hidden;
        z-index: 9999;
      }

      /* Floating Button */
      #kavach-btn {
        z-index: 9999;
        /*background: red;*/
        color: #e5e7eb;
        /*border: 1px solid #1e293b;*/
        padding: 12px 16px;
        border-radius: 999px;
        cursor: pointer;
        font-weight: 600;
        animation: kavachParticles 2s linear infinite;
      }

      .tooltip-text {
        position: absolute;
        bottom: 110%;
        left: 50%;
        transform: translateX(-50%);
        background: #0b5cff;
        color: white;
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 6px;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      #kavach-btn:hover .tooltip-text {
        opacity: 1;
        transform: translateX(-50%) translateY(-4px);
      }

      @keyframes kavachParticles {
        0% {
          transform: scale(0.8);
        }

        50% {
          transform: scale(1.1);
        }

        100% {
          transform: scale(0.8);
        }
      }

      /* Chat Box */
      #kavach-chat {
        display: none;
        width: 320px;
        height: 420px;
        margin-top: 10px;
        background: #020617;
        border: 1px solid #1e293b;
        border-radius: 14px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
        overflow: hidden;
      }

      /* Header */
      .kavach-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: #020617;
        border-bottom: 1px solid #1e293b;
        color: #e5e7eb;
        font-weight: 600;
      }

      .kavach-header button {
        background: none;
        border: none;
        color: #94a3b8;
        font-size: 16px;
        cursor: pointer;
      }

      /* Messages */
      #kavach-messages {
        padding: 12px;
        height: 290px;
        overflow-y: auto;
      }

      .kavach-msg {
        margin-bottom: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 14px;
        line-height: 1.4;
      }

      .kavach-msg.ai {
        background: #020617;
        border: 1px solid #1e293b;
        color: #e5e7eb;
      }

      .kavach-msg.user {
        background: #2563eb;
        color: white;
        align-self: flex-end;
      }

      /* Input */
      .kavach-input {
        display: flex;
        gap: 6px;
        padding: 10px;
        border-top: 1px solid #1e293b;
      }

      .kavach-input input {
        flex: 1;
        padding: 8px;
        border-radius: 6px;
        border: none;
        outline: none;
        background: #020617;
        color: #e5e7eb;
      }

      .kavach-input button {
        background: #2563eb;
        border: none;
        color: white;
        padding: 8px 12px;
        border-radius: 6px;
        cursor: pointer;
      }
    
    
      .wave-bg {
        background:
          repeating-linear-gradient(120deg,
            rgba(59, 130, 246, 0.15) 0px,
            rgba(59, 130, 246, 0.15) 2px,
            transparent 2px,
            transparent 20px),
          radial-gradient(600px 400px at 50% 50%, rgba(37, 99, 235, 0.45), transparent 65%);
        animation: waveMove 10s linear infinite;
      }

      @keyframes waveMove {
        0% {
          transform: translateX(-15%) translateY(-10%) scale(1.2);
        }

        100% {
          transform: translateX(15%) translateY(10%) scale(1.2);
        }
      }
    
    
      .faq-item {
        border: 1px solid #1e293b;
        border-radius: 12px;
        background: #0f172a;
        overflow: hidden;
      }

      .faq-question {
        width: 100%;
        text-align: left;
        padding: 18px 22px;
        font-weight: 600;
        color: #e2e8f0;
        background: transparent;
        cursor: pointer;
        position: relative;
        transition: background 0.3s ease;
      }

      .faq-question:hover {
        background: rgba(59, 130, 246, 0.08);
      }

      .faq-question::after {
        content: '+';
        position: absolute;
        right: 20px;
        font-size: 20px;
        transition: transform 0.3s ease;
      }

      .faq-item.active .faq-question::after {
        transform: rotate(45deg);
      }

      .faq-answer {
        max-height: 0;
        overflow: hidden;
        padding: 0 22px;
        color: #94a3b8;
        transition: all 0.4s ease;
      }

      .faq-item.active .faq-answer {
        max-height: 500px;
        padding: 0 22px 20px 22px;
      }

      #overviewtable td {
        padding: 10px;
      }
    
    
      .product-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0;
        transform: scale(0.98);
        transition: opacity 0.45s ease, transform 0.45s ease;
      }

      .product-img.active {
        opacity: 1;
        transform: scale(1);
      }

      .indicator {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #1e293b;
        transition: all 0.3s ease;
      }

      .indicator:hover {
        background: #3b82f6;
      }

      .indicator.active {
        width: 22px;
        background: #3b82f6;
      }
    
    
.tab-content {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.tab-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

    
.spec-title {
  padding: 16px 24px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  background: #020617;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.spec-row {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 16px;
  padding: 14px 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.spec-label {
  color: #cbd5f5;
  font-weight: 500;
}

.spec-value {
  color: #94a3b8;
}

@media (max-width: 640px) {
  .spec-row {
    grid-template-columns: 1fr;
  }
}


.doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: #e5e7eb;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  transition: background 0.25s ease, transform 0.25s ease;
}

.doc-item:hover {
  background: rgba(59,130,246,0.15);
  transform: translateX(3px);
}