:root {
      /* KPRVERSE-inspired dark/neon theme */
      --blue-700: #00bcd4; /* Cyan/Teal */
      --blue-500: #00e0ff; /* Brighter Cyan */
      --purple-500: #ff00ff; /* Magenta/Neon Pink */
      --accent: #ffeb3b; /* Neon Yellow/Gold */
      --background-dark: #121212; /* Dark background */
      --card-dark: #1e1e1e; /* Slightly lighter card background */
      --muted-dark: #2c2c2c;
      --text-light: #f0f0f0; /* Light text on dark background */
      --shadow: 0 4px 15px rgba(0, 224, 255, 0.1); /* Neon-like shadow */
      --glass: rgba(30, 30, 30, 0.8);
    }

    * {
      box-sizing: border-box;
    }
    html, body {
      height: 100%;
    }
    body {
      margin: 0;
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: var(--text-light); /* Light text */
      background: var(--background-dark); /* Dark background */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.6;
    }

    /* NAV */
    .nav {
      position: sticky;
      top: 0;
      backdrop-filter: blur(8px);
      background: rgba(18, 18, 18, 0.9); /* Semi-transparent dark nav */
      color: white;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
      border-bottom: 1px solid rgba(0, 224, 255, 0.2); /* Neon border */
      z-index: 1000;
    }
    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 14px 18px;
    }
    .brand {
      display: flex;
      gap: 12px;
      align-items: center;
    }
    .brand .logo {
      width: 52px;
      height: 52px;
      border-radius: 50%; /* Circle logo */
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--blue-500), var(--purple-500));
      box-shadow: 0 0 15px rgba(0, 224, 255, 0.8); /* Neon glow */
      font-weight: 700;
      color: var(--background-dark);
    }
    .brand .title {
      font-weight: 700;
      font-size: 1.05rem;
      color: var(--blue-500); /* Neon title color */
      letter-spacing: 1px;
    }

    .nav-links {
      display: flex;
      gap: 14px;
      align-items: center;
    }
    .nav-links button {
      background: transparent;
      border: 0;
      color: rgba(255, 255, 255, 0.8);
      padding: 8px 12px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.98rem;
      transition: all 0.22s ease;
    }
    .nav-links button:hover {
      transform: translateY(-2px);
      color: var(--blue-500); /* Neon hover */
    }
    .nav-links button.active {
      background: var(--card-dark);
      box-shadow: 0 0 8px rgba(255, 0, 255, 0.5) inset; /* Magenta glow */
      color: var(--purple-500);
      text-decoration: underline;
      text-underline-offset: 6px;
    }

    /* Page shell */
    .container {
      max-width: 1200px;
      margin: 28px auto;
      padding: 0 18px 80px;
    }

    /* Panel container (tabbed sections) */
    .panels {
      min-height: calc(100vh - 120px);
      display: block;
      position: relative;
    }

    .panel {
      display: none;
      background: var(--card-dark); /* Dark card background */
      border-radius: 16px;
      padding: 36px;
      box-shadow: 0 0 20px rgba(0, 224, 255, 0.15); /* Soft neon glow for panel */
      border: 1px solid rgba(0, 224, 255, 0.2);
      transition: transform 0.36s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.36s ease;
      position: absolute;
      inset: 0;
      overflow: auto;
    }

    .panel.show {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }
    .panel.hidden-left {
      transform: translateX(-8%);
      opacity: 0;
    }
    .panel.hidden-right {
      transform: translateX(8%);
      opacity: 0;
    }

    /* HERO / HOME */
    .hero {
      display: flex;
      gap: 28px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .hero-left {
      flex: 1 1 520px;
      min-width: 260px;
      color: var(--text-light);
    }
    .badge {
      display: inline-block;
      background: linear-gradient(90deg, var(--blue-500), var(--purple-500));
      color: var(--background-dark);
      padding: 10px 18px;
      border-radius: 999px;
      font-weight: 700;
      box-shadow: 0 0 10px rgba(255, 0, 255, 0.6); /* Magenta glow on badge */
      margin-bottom: 14px;
      font-size: 0.95rem;
      animation: pulseEffect 2s ease-in-out infinite;
    }
    @keyframes pulseEffect {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.05); /* Less intense pulse for dark theme */
      }
    }
    .hero h1 {
      font-size: 2.5rem;
      margin: 8px 0 12px;
      color: var(--blue-500); /* Neon color for heading */
      text-shadow: 0 0 5px rgba(0, 224, 255, 0.5);
    }
    .hero p.lead {
      color: var(--text-light);
      font-weight: 300;
      max-width: 720px;
      margin-bottom: 18px;
      font-size: 1.05rem;
    }
    .cta-row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }
    .btn {
      display: inline-block;
      padding: 12px 20px;
      border-radius: 10px;
      font-weight: 700;
      border: 0;
      cursor: pointer;
      font-size: 1rem;
    }
    .btn.primary {
      background: var(--accent); /* Neon yellow CTA */
      color: var(--background-dark);
      box-shadow: 0 0 15px rgba(255, 235, 59, 0.7);
      transition: transform 0.18s;
    }
    .btn.primary:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 0 20px rgba(255, 235, 59, 1);
    }
    .btn.ghost {
      background: transparent;
      color: var(--blue-500);
      border: 1px solid var(--blue-500);
      box-shadow: 0 0 5px rgba(0, 224, 255, 0.5);
    }

    .hero-right {
      width: 420px;
      max-width: 44%;
      min-width: 260px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .hero-illustration {
      width: 100%;
      border-radius: 14px;
      padding: 14px;
      background: linear-gradient(180deg, rgba(0, 224, 255, 0.08), rgba(255, 0, 255, 0.06)); /* Dark gradient */
      box-shadow: 0 0 25px rgba(0, 224, 255, 0.1);
      border: 1px solid rgba(0, 224, 255, 0.2);
      display: grid;
      place-items: center;
      min-height: 220px;
    }

    /* About, cards, grid */
    h2.section-title {
      color: var(--purple-500); /* Neon magenta title */
      font-size: 1.6rem;
      margin-bottom: 16px;
      font-weight: 700;
      text-align: center;
      text-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
    }
    .about p {
      color: var(--text-light);
      font-size: 1rem;
      line-height: 1.6;
    }
    .about .highlight {
      background: linear-gradient(90deg, var(--blue-500), var(--purple-500));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-weight: 700;
      text-shadow: none;
    }

    .clients-grid {
      margin-top: 18px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 14px;
    }
    .client-card {
      padding: 12px;
      background: var(--muted-dark);
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 0 10px rgba(0, 224, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      justify-content: center;
    }
    .client-logo {
      width: 100%;
      height: 80px;
      max-width: 160px;
      border-radius: 6px;
      background: var(--background-dark);
      border: 1px solid var(--blue-700);
      box-shadow: 0 0 5px var(--blue-700);
      display: grid;
      place-items: center;
      color: var(--blue-500);
      font-weight: 700;
      font-size: 1.2rem;
    }

    /* CONNECTION content */
    .sub-nav {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-bottom: 20px;
      flex-wrap: wrap;
    }
    .pill {
      background: var(--muted-dark);
      padding: 8px 14px;
      border-radius: 999px;
      font-weight: 700;
      color: var(--blue-500);
      cursor: pointer;
      border: 1px solid var(--blue-500);
      box-shadow: 0 0 5px rgba(0, 224, 255, 0.5);
    }
    .pill.active {
      background: var(--blue-500);
      color: var(--background-dark);
      box-shadow: 0 0 15px rgba(0, 224, 255, 0.8);
    }

    .plans-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 14px;
      margin-top: 8px;
    }
    .plan-card {
      background: var(--card-dark);
      padding: 16px;
      border-radius: 12px;
      box-shadow: 0 0 15px rgba(255, 0, 255, 0.1); /* Magenta shadow */
      border: 1px solid rgba(255, 0, 255, 0.2);
    }
    .plan-card h4 {
      margin: 0 0 6px;
      font-size: 1.05rem;
      color: var(--blue-500);
    }
    .plan-card p {
      margin: 4px 0;
      color: var(--text-light);
      font-size: 0.95rem;
    }
    .plan-card .price {
      color: var(--accent); /* Neon accent price */
      font-weight: 700;
      font-size: 1.05rem;
    }

    .popular {
      background: linear-gradient(180deg, rgba(255, 235, 59, 0.1), rgba(255, 235, 59, 0.05));
      border: 1px solid var(--accent);
      box-shadow: 0 0 20px rgba(255, 235, 59, 0.4);
    }
    .popular-tag {
      background: var(--accent);
      color: var(--background-dark);
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.78rem;
      font-weight: 700;
    }

    /* full plans table */
    .table-wrap {
      overflow: auto;
      margin-top: 12px;
      border-radius: 8px;
      border: 1px solid rgba(0, 224, 255, 0.2);
    }
    table.full-plans-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 820px;
    }
    .full-plans-table th,
    .full-plans-table td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--muted-dark);
      text-align: left;
      font-size: 0.95rem;
      color: var(--text-light);
    }
    .full-plans-table th {
      background: var(--blue-700);
      color: var(--background-dark);
      font-weight: 700;
      position: sticky;
      top: 0;
    }

    /* inquiry form */
    .inquiry-form {
      max-width: 640px;
      margin: 8px auto;
      padding: 18px;
      background: var(--card-dark);
      border-radius: 10px;
      box-shadow: 0 0 15px rgba(255, 0, 255, 0.1);
      border: 1px solid rgba(255, 0, 255, 0.2);
    }
    .inquiry-form label {
      font-weight: 700;
      display: block;
      margin-bottom: 6px;
      color: var(--blue-500);
    }
    .inquiry-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .inquiry-row .choice {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--muted-dark);
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--purple-500);
      color: var(--text-light);
    }
    .inquiry-form input[type="text"],
    .inquiry-form input[type="tel"],
    .inquiry-form textarea {
      width: 100%;
      padding: 10px 12px;
      border-radius: 8px;
      border: 1px solid var(--purple-500);
      background: var(--background-dark);
      color: var(--text-light);
      font-size: 0.95rem;
    }
    .inquiry-form button {
      margin-top: 6px;
      padding: 12px 16px;
      border-radius: 10px;
      border: 0;
      background: linear-gradient(90deg, var(--blue-500), var(--purple-500));
      color: var(--background-dark);
      font-weight: 700;
      cursor: pointer;
      width: 100%;
      transition: transform 0.2s ease;
      box-shadow: 0 0 15px rgba(255, 0, 255, 0.8);
    }
    .inquiry-form button:hover {
      transform: translateY(-2px) scale(1.01);
      box-shadow: 0 0 20px rgba(255, 0, 255, 1);
    }

    /* Support & FAQ */
    .troubleshoot-list {
      list-style: none;
      padding: 0;
      margin: 16px 0;
      display: grid;
      gap: 12px;
    }
    .troubleshoot-list li {
      padding: 14px;
      background: var(--muted-dark);
      border-radius: 10px;
      border-left: 4px solid var(--blue-500);
      color: var(--text-light);
    }
    .troubleshoot-list li strong {
      color: var(--accent);
    }

    .support-contact {
      display: flex;
      gap: 18px;
      justify-content: center;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .support-contact div {
      text-align: center;
      min-width: 150px;
      padding: 10px;
      background: var(--muted-dark);
      border-radius: 8px;
      border: 1px solid rgba(0, 224, 255, 0.2);
    }
    .support-contact p {
      margin: 4px 0;
    }
    .support-contact strong {
      color: var(--blue-500);
    }

    .faq-list {
      display: grid;
      gap: 12px;
      margin-top: 12px;
    }
    .faq-item {
      background: var(--muted-dark);
      padding: 16px;
      border-radius: 10px;
      border-left: 4px solid var(--purple-500);
      transition: all 0.3s ease;
    }
    .faq-item:hover {
      background: rgba(255, 0, 255, 0.05);
      box-shadow: 0 0 10px rgba(255, 0, 255, 0.3);
    }
    .faq-item h3 {
      margin: 0;
      cursor: pointer;
      color: var(--blue-500);
      font-size: 1rem;
      transition: color 0.3s ease;
    }
    .faq-item h3:hover {
      color: var(--accent);
    }
    .faq-item p {
      margin-top: 12px;
      display: none;
      color: var(--text-light);
      font-size: 0.95rem;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .faq-item.open p {
      display: block;
      opacity: 1;
    }

    /* footer */
    footer {
      margin-top: 22px;
      padding: 18px;
      text-align: center;
      color: var(--blue-700);
      font-size: 0.95rem;
      border-top: 1px solid rgba(0, 224, 255, 0.2);
    }
    footer a {
      color: var(--purple-500) !important;
      text-shadow: 0 0 3px rgba(255, 0, 255, 0.5);
    }

    /* SVG update for dark theme */
    .hero-illustration svg rect {
      fill: linear-gradient(180deg, #1f303a, #35253b) !important;
      stroke: var(--blue-700) !important;
    }
    .hero-illustration svg circle {
      fill: var(--blue-500) !important;
    }
    .hero-illustration svg rect[x="170"] {
      fill: var(--purple-500) !important;
    }
    .hero-illustration svg text {
      fill: var(--background-dark) !important;
    }


    /* small screen tweaks */
    @media (max-width: 980px) {
      .hero h1 {
        font-size: 2rem;
      }
      .hero-right {
        display: none;
      }
      .nav-inner {
        padding: 12px 14px;
      }
      .panel {
        padding: 22px;
      }
      .container {
        margin-top: 12px;
      }
    }

    @media (max-width: 640px) {
      .nav-links {
        display: flex;
        gap: 6px;
        overflow: auto;
      }
      .nav-links button {
        padding: 8px 10px;
        font-size: 0.92rem;
      }
      .hero h1 {
        font-size: 1.6rem;
      }
      .faq-item {
        padding: 12px;
      }
    }
    /* Target the main scrollbar track */
body::-webkit-scrollbar {
  width: 10px; /* Width of the entire scrollbar */
}

/* Customize the scrollbar track (the background) */
body::-webkit-scrollbar-track {
  background: #2c2c2c; /* Dark gray to blend with the dark background */
  border-radius: 10px; /* Optional: adds rounded corners to the track */
}

/* Customize the scrollbar handle (the moving part) */
body::-webkit-scrollbar-thumb {
  background-color: #555; /* A lighter gray for the handle */
  border-radius: 10px; /* Rounded corners for the handle */
  border: 2px solid #2c2c2c; /* Spacing/border around the handle, matching the track color */
}

/* Change the color of the handle when hovering over it */
body::-webkit-scrollbar-thumb:hover {
  background-color: #777; /* Slightly lighter gray on hover for interaction feedback */
}

/* --- Optional: For Firefox (Requires different properties) --- */
/* For modern Firefox versions, use scrollbar-color and scrollbar-width */
body {
  scrollbar-width: thin; /* 'auto' or 'thin' */
  scrollbar-color: #555 #2c2c2c; /* thumb color | track color */
}
/* ─────── Expressive Typography Animations ─────── */
.text-reveal > span {
  display: inline-block;
  opacity: 0;
  transform: translateY(60px) rotateX(-80deg);
  transform-origin: bottom;
}

.text-reveal.animate > span {
  opacity: 1;
  transform: translateY(0) rotateX(0);
  transition: all 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.text-reveal.animate > span:nth-child(1)  { transition-delay: 0.05s; }
.text-reveal.animate > span:nth-child(2)  { transition-delay: 0.10s; }
.text-reveal.animate > span:nth-child(3)  { transition-delay: 0.15s; }
/* ... up to 60 letters is more than enough for your site */
.text-reveal.animate > span:nth-child(n+4)  { transition-delay: calc(0.05s + (n * 0.04s)); }

.neon-typewriter {
  overflow: hidden;
  border-right: 3px solid var(--blue-500);
  white-space: nowrap;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0%, 100% { border-color: var(--blue-500); }
  50% { border-color: transparent; }
}

.pulse-glow {
  animation: pulseGlow 3s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 8px var(--blue-500), 0 0 15px var(--purple-500); }
  to   { text-shadow: 0 0 15px var(--blue-500), 0 0 30px var(--purple-500), 0 0 50px var(--blue-500; }
}