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

       :root {
           /* ===== BRAND / ACCENT ===== */
           --accent-primary: #4ade80;
           --accent-secondary: #00f2a6;
           --accent-tertiary: #22c55e;
           --accent-info: #60a5fa;
           --accent-error: #f87171;

           /* ===== TEXT ===== */
           --text-main: #ffffff;
           --text-muted: #aaa;
           --text-soft: #9ca3af;
           --text-dim: #777;
           --text-light: #e5e7eb;
           --text-gray: #bbb;

           /* ===== BACKGROUNDS ===== */
           --bg-main: #000;
           --bg-dark: #0b0b0b;
           --bg-card: #151515;
           --bg-glass: rgba(255, 255, 255, 0.08);
           --bg-glass-soft: rgba(255, 255, 255, 0.05);

           /* ===== GRADIENTS ===== */
           --grad-dark: linear-gradient(135deg, #0f172a, #020617);
           --grad-profile: linear-gradient(135deg, #22c55e 0%, #18d5d6 100%);
           --grad-accent-radial: radial-gradient(circle at top right,
                   rgba(0, 242, 166, 0.15),
                   rgba(0, 0, 0, 0.95) 65%);

           /* ===== BORDERS ===== */
           --border-soft: #1f1f1f;
           --border-glass: rgba(255, 255, 255, 0.12);
           --border-glass-soft: rgba(255, 255, 255, 0.1);

           /* ===== SHADOWS ===== */
           --shadow-accent: 0 10px 30px rgba(0, 242, 166, 0.25);
           --shadow-heavy: 0 30px 60px rgba(0, 0, 0, 0.7);
           --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.4);
       }

       /* Smooth scrolling for anchor links */
       html {
           scroll-behavior: smooth;
       }

       body {
           font-family: 'Inter', sans-serif;
           background: #0b0b0b;
           color: #f1f1f1;
           line-height: 1.6;
           overflow-x: hidden;
       }

       a {
           text-decoration: none;
           color: inherit
       }
* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #262626 transparent;
}

/* WebKit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    #262626,
    #474747da
  );
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: #646464dc
}

::-webkit-scrollbar-corner {
  background: transparent;
}

       /* =========================
   HERO SECTION - SPLIT LAYOUT
========================= */
       header {
           min-height: 100vh;
           display: flex;
           flex-direction: row;
           justify-content: space-between;
           align-items: center;
           gap: 60px;
           padding: 100px 60px 80px 60px;
           position: relative;
           max-width: 1400px;
           margin: 0 auto;
       }

       /* LEFT SIDE - TEXT CONTENT */
       .hero-content {
           flex: 1;
           font-size: 60px;
           max-width: 600px;
           text-align: left;
       }

       header h1 {
           font-family: 'Poppins', sans-serif;
           font-size: 80px;
           line-height: 1.2;
           margin-bottom: 20px;
       }

       header h1 span {
           background: linear-gradient(90deg, #00ffa2, #22d3ee);
           -webkit-background-clip: text;
           background-clip: text;
           font-size: 50px;
           -webkit-text-fill-color: transparent;
       }

       .hero-subtitle {
           font-size: 1.15rem;
           color: #aaa;
           line-height: 1.7;
           margin-bottom: 35px;
       }

       /* AI BUTTON - PREMIUM DESIGN */
       .ai-btn {
           position: relative;
           padding: 16px 44px;
           border-radius: 999px;
           border: 2px solid rgba(100, 200, 255, 0.4);
           background: #05090c;
           cursor: pointer;
           font-family: 'Poppins';
           overflow: hidden;
           box-shadow: 0 0 30px rgba(100, 200, 255, 0.3);
           transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
           font-size: 18px;
           font-weight: 600;
           color: #eaffff;
           text-shadow: 0 0 12px rgba(100, 255, 255, 0.6);
           z-index: 1;
           isolation: isolate;
           display: inline-block;
       }

       /* Rotating ring effect */
       .ai-btn::before {
           content: "";
           position: absolute;
           inset: -10px;
           background: conic-gradient(from 0deg,
                   #ff00ff,
                   #aa00ff,
                   #4400ff,
                   #0088ff,
                   #00ffff,
                   #00ffaa,
                   #aaff00,
                   #ffff00,
                   #ff8800,
                   #ff0044,
                   #ff00ff);
           animation: spin 12s linear infinite;
           opacity: 0.7;
           filter: blur(20px);
           z-index: -1;
       }

       .ai-btn::after {
           content: "";
           position: absolute;
           inset: 4px;
           border-radius: 999px;
           background: linear-gradient(145deg, rgba(5, 10, 20, 0.95), rgba(0, 5, 15, 0.98));
           z-index: 1;
       }

       .ai-btn .span {
           position: relative;
           z-index: 2;
           transition: text-shadow 0.4s ease;
           text-decoration: none;
           color: inherit;
           display: block;
       }

       .ai-btn:hover {
           border-color: rgba(0, 255, 255, 0.8);
           box-shadow: 0 0 70px rgba(100, 200, 255, 0.7), 0 0 120px rgba(255, 100, 255, 0.4);
           transform: translateY(-4px) scale(1.03);
       }

       .ai-btn:hover::before {
           animation-duration: 3s;
           filter: blur(15px) hue-rotate(90deg) brightness(1.3);
           opacity: 0.9;
       }

       .ai-btn:hover .span {
           text-shadow: 0 0 25px rgba(0, 255, 255, 1);
       }

       .ai-btn:active {
           transform: translateY(0) scale(0.98);
       }

       @keyframes spin {
           to {
               transform: rotate(360deg);
           }
       }

       /* =========================
   RIGHT SIDE - VIDEO WRAPPER
========================= */
       .video-wrapper {
           flex: 1;
           position: relative;
           max-width: 650px;
           width: 100%;
       }

       .video-card {
           background: rgba(20, 20, 30, 0.85);
           border-radius: 28px;
           border: 1px solid rgba(0, 255, 255, 0.3);
           overflow: hidden;
           box-shadow:
               0 30px 80px rgba(0, 0, 0, 0.9),
               0 0 40px rgba(0, 255, 255, 0.25);
           transition: all 0.4s ease;
       }

       .video-card:hover {
           transform: translateY(-10px);
           box-shadow:
               0 40px 100px rgba(0, 0, 0, 0.95),
               0 0 60px rgba(0, 255, 255, 0.4);
           border-color: rgba(0, 255, 255, 0.5);
       }

       .video-container {
           position: relative;
           width: 100%;
           padding-bottom: 62%;
           display: block;
       }

       .video-container video {
           position: absolute;
           inset: 0;
           width: 100%;
           height: 100%;
           object-fit: cover;
       }

       /* Neon strips */
       .neon-strip {
           position: absolute;
           background: linear-gradient(180deg, #00ffa2, #22d3ee);
           filter: blur(6px);
           opacity: 0.9;
           transition: all 0.4s ease;
       }

       .video-card:hover .neon-strip {
           filter: blur(8px);
           opacity: 1;
       }

       .neon-strip.top-right {
           width: 120px;
           height: 3px;
           top: -8px;
           right: 40px;
       }

       .neon-strip.right-side {
           width: 3px;
           height: 160px;
           top: 40px;
           right: -8px;
       }

       /* =========================
   RESPONSIVE - MOBILE/TABLET
========================= */
       @media (max-width: 1024px) {
           header {
               flex-direction: column;
               padding: 80px 30px;
               text-align: center;
               gap: 50px;
           }

           .hero-content {
               text-align: center;
               max-width: 100%;
           }

           header h1 {
               font-size: 2.8rem;
           }

           .hero-subtitle {
               font-size: 1.05rem;
           }

           .video-wrapper {
               max-width: 100%;
           }
       }

       @media (max-width: 768px) {
           header {
               padding: 60px 20px;
               min-height: auto;
           }

           header h1 {
               font-size: 2.2rem;
           }

           .hero-subtitle {
               font-size: 0.95rem;
           }

           .ai-btn {
               padding: 14px 36px;
               font-size: 16px;
           }

           .video-wrapper {
               margin-top: 30px;
           }

           .neon-strip.top-right {
               width: 80px;
               right: 20px;
           }

           .neon-strip.right-side {
               height: 100px;
               top: 20px;
           }
       }

       @media (max-width: 480px) {
           header h1 {
               font-size: 1.8rem;
           }

           .ai-btn {
               padding: 12px 30px;
               font-size: 15px;
           }
       }


       section {
           padding: 80px 20px;
           max-width: 1200px;
           margin: auto;
       }

       .title {
           text-align: center;
           margin-bottom: 50px
       }

       .title h2 {
           font-family: 'Poppins';
           font-size: 2.3rem;
       }

       .title p {
           color: #aaa
       }


       /* =========================
   FLOATING TECH ICONS
========================= */

       .tech-bg {
           position: fixed;
           inset: 0;
           pointer-events: none;
           z-index: 0;
           overflow: hidden;
       }

       .tech-icon {
           position: absolute;
           font-size: 48px;
           opacity: 0.08;
           filter: blur(0.2px);
           animation: techFloat linear infinite;
           transition:
               opacity 0.4s ease,
               filter 0.4s ease,
               text-shadow 0.4s ease,
               color 0.4s ease;
       }

       /* Floating motion */
       @keyframes techFloat {
           0% {
               transform: translateY(120vh) rotate(0deg);
           }

           100% {
               transform: translateY(-140vh) rotate(360deg);
           }
       }

       /* Glow on hover proximity */
       .tech-icon.active {
           opacity: 0.9;
           filter: blur(0);
       }

       /* ===== Language Glow Colors ===== */

       .glow-html.active {
           color: #ff6d00;
           text-shadow: 0 0 25px #ff6d00;
       }

       .glow-css.active {
           color: #00b0ff;
           text-shadow: 0 0 25px #00b0ff;
       }

       .glow-js.active {
           color: #ffd600;
           text-shadow: 0 0 25px #ffd600;
       }

       .glow-react.active {
           color: #00e5ff;
           text-shadow: 0 0 25px #00e5ff;
       }

       .glow-node.active {
           color: #69f0ae;
           text-shadow: 0 0 25px #69f0ae;
       }

       .glow-python.active {
           color: #82b1ff;
           text-shadow: 0 0 25px #82b1ff;
       }

       .glow-github.active {
           color: #ffffff;
           text-shadow: 0 0 22px #ffffff;
       }

       /* Responsive */
       @media (max-width: 768px) {
           .tech-icon {
               font-size: 34px;
           }
       }

       /* =========================
   NAVBAR BASE
========================= */

       .top-nav {
           position: fixed;
           top: 25px;
           left: 50%;
           transform: translateX(-50%);
           width: calc(100% - 80px);
           max-width: 1400px;

           display: flex;
           align-items: center;
           justify-content: space-between;

           z-index: 1000;
       }

       /* NAV LOGO CONTAINER */
       .nav-logo a {
           position: relative;
           width: 200px;
           /* enough space for name */
           height: 60px;
           /* increased for bigger name */
           display: flex;
           align-items: center;
           text-decoration: none;
       }

       /* COMMON IMAGE STYLE */
       .nav-logo img {
           position: absolute;
           left: 0;
           width: auto;
           object-fit: contain;
           transition: all 0.45s ease;
       }

       /* NAME IMAGE (BIGGER) */
       .name-img {
           height: 40px;
           /* 👈 increased size */
           opacity: 1;
           transform: scale(1);
       }

       /* LOGO IMAGE (SMALLER INITIALLY) */
       .logo-img {
           height: 70px;
           opacity: 0;
           transform: scale(0.6);
       }

       /* 🔥 SCROLLED STATE */
       .nav-logo.scrolled .name-img {
           opacity: 0;
           transform: scale(0.6);
       }

       .nav-logo.scrolled .logo-img {
           opacity: 1;
           transform: scale(1);
       }


       .nav-center {
           display: flex;
           gap: 32px;
           padding: 14px 34px;
           margin-left: -120px;
           background: rgba(255, 255, 255, 0.08);
           backdrop-filter: blur(18px);
           border-radius: 999px;
           border: 1px solid rgba(255, 255, 255, 0.12);
       }

       .nav-link {
           font-size: 0.95rem;
           color: #e5e7eb;
           opacity: 0.85;
       }

       .nav-link.active,
       .nav-link:hover {
           opacity: 1;
       }

       /* RIGHT SIDE */
       .nav-action {
           display: flex;
           align-items: center;
           gap: 12px;
       }

       /* NAV LOGO CONTAINER */
       .nav-logo {
           display: flex;
           align-items: center;
       }

       /* LINK */
       .nav-logo a {
           display: flex;
           align-items: center;
           gap: 10px;
           text-decoration: none;
       }

       /* NAME IMAGE (TEXT LOGO) */
       .name-img {
           height: 40px;
           width: auto;
       }

       /* ICON LOGO */
       .logo-img {
           width: auto;
       }

       /* ------------------------------
   TABLET (max-width: 992px)
--------------------------------*/
       @media (max-width: 992px) {
           .name-img {
               height: 34px;
           }

       }

       /* ------------------------------
   MOBILE (max-width: 768px)
--------------------------------*/
       @media (max-width: 768px) {
           .name-img {
               height: 28px;
           }

       }

       /* ------------------------------
   SMALL PHONES (max-width: 480px)
--------------------------------*/
       @media (max-width: 480px) {

       }

       /* ------------------------------
   VERY SMALL DEVICES (max-width: 360px)
--------------------------------*/
       @media (max-width: 360px) {
       }


       /* ===============================
   PREMIUM NAV LOGIN BUTTON
   =============================== */

       /* LOGIN */
       .login-btn {
           padding: 10px 24px;
           border-radius: 999px;
           background: linear-gradient(135deg, #00ffa2, #22d3ee);
           color: #000;
           font-weight: 600;
           transition: all 0.3s ease;
       }

       .login-btn:hover {
           background: linear-gradient(135deg, #00e68a, #1ed0e8);
           box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
           transform: scale(1.1);
       }

       /* =========================
   HAMBURGER
========================= */

       .menu-btn {
           display: none;
           font-size: 1.6rem;
           background: rgba(0, 0, 0, 0);
           border: none;
           color: #fff;
           padding: 8px 12px;
           border-radius: 50%;
           cursor: pointer;
       }

       /* =========================
   SIDE NAV DRAWER
========================= */

       .side-nav {
           position: fixed;
           top: 0;
           right: -100%;
           width: 280px;
           height: 100vh;

           background: rgba(9, 9, 9, 0.9);
           backdrop-filter: blur(18px);
           border-left: 1px solid rgba(255, 255, 255, 0.1);

           display: flex;
           flex-direction: column;
           gap: 26px;
           padding: 90px 30px;

           transition: right 0.35s ease;
           z-index: 2000;
       }

       .side-nav.active {
           right: 0;
       }

       .side-nav a {
           font-size: 1.05rem;
           color: #e5e7eb;
       }

       .side-nav a:hover {
           color: #00f2a6;
       }

       .side-nav .close-btn {
           position: absolute;
           top: 22px;
           right: 22px;
           font-size: 2rem;
           cursor: pointer;
           color: #aaa;
       }

       .side-nav .show {
           color: #000000;
       }

       .side-nav .show:hover {
           color: #ffffff;
       }

       /* ========== Profile icon ========== */

       /* Profile Wrapper */
       .profile-wrapper {
           position: relative;
           display: inline-block;
       }

       /* Profile Circle */
       .profile-circle {
           width: 45px;
           height: 45px;
           background: linear-gradient(135deg, #22c55e, #16a34a);
           color: #fff;
           font-weight: 700;
           font-size: 20px;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           box-shadow: 0 4px 15px rgba(34, 197, 94, 0.4);
           transition: all 0.3s ease;
           user-select: none;
       }

       .profile-circle:hover {
           transform: scale(1.1);
           box-shadow: 0 6px 20px rgba(34, 197, 94, 0.6);
       }

       /* Profile Dropdown */
       .profile-dropdown {
           position: absolute;
           top: 60px;
           right: 0;
           background: rgba(20, 25, 22, 0.98);
           backdrop-filter: blur(15px);
           border: 1px solid rgba(34, 197, 94, 0.2);
           border-radius: 12px;
           min-width: 240px;
           padding: 15px;
           box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
           opacity: 0;
           visibility: hidden;
           transform: translateY(-10px);
           transition: all 0.3s ease;
           z-index: 2000;
       }

       .profile-dropdown.show {
           opacity: 1;
           visibility: visible;
           transform: translateY(0);
       }

       .profile-info {
           text-align: center;
           margin-bottom: 12px;
           padding-bottom: 12px;
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       }

       .profile-name {
           font-weight: 600;
           font-size: 16px;
           color: #fff;
           margin: 0 0 5px 0;
       }

       .profile-email {
           font-size: 13px;
           color: #999;
           margin: 0;
           word-break: break-word;
       }

       .dropdown-btn {
           width: 100%;
           padding: 12px;
           background: rgba(255, 255, 255, 0.05);
           border: 1px solid rgba(255, 255, 255, 0.1);
           border-radius: 8px;
           color: #fff;
           font-size: 14px;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
           transition: all 0.3s ease;
           margin-bottom: 8px;
           text-decoration: none;
       }

       .dropdown-btn:last-child {
           margin-bottom: 0;
       }

       .dropdown-btn:hover {
           background: rgba(34, 197, 94, 0.15);
           border-color: rgba(34, 197, 94, 0.3);
       }

       /* =========================
   SIDEBAR
========================= */
       .dashboard-sidebar {
           width: 260px;
           background: rgba(15, 20, 17, 0.85);
           backdrop-filter: blur(10px);
           border-right: 1px solid rgba(255, 255, 255, 0.08);
           position: fixed;
           left: 0;
           top: 70px;
           bottom: 0;
           padding: 30px 0;
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           z-index: 100;
       }

       .sidebar-menu {
           display: flex;
           flex-direction: column;
           gap: 5px;
           padding: 0 15px;
       }

       .menu-item {
           display: flex;
           align-items: center;
           gap: 15px;
           padding: 15px 20px;
           color: #aaa;
           text-decoration: none;
           border-radius: 10px;
           transition: all 0.3s ease;
           font-size: 15px;
       }

       .menu-item:hover {
           background: rgba(255, 255, 255, 0.05);
           color: #fff;
       }

       .menu-item.active {
           background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
           color: #fff;
           box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
       }

       .menu-item i {
           font-size: 18px;
           width: 20px;
       }

       .sidebar-footer {
           padding: 0 15px;
       }

       .logout-sidebar-btn {
           width: 100%;
           padding: 15px;
           background: rgba(248, 113, 113, 0.1);
           border: 1px solid rgba(248, 113, 113, 0.3);
           border-radius: 10px;
           color: #f87171;
           cursor: pointer;
           transition: all 0.3s ease;
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 10px;
       }

       .logout-sidebar-btn:hover {
           background: rgba(248, 113, 113, 0.2);
           border-color: rgba(248, 113, 113, 0.5);
       }

       /* =========================
   MOBILE & TABLET
========================= */

       @media (max-width: 1024px) {

           .top-nav {
               top: 0;
               left: 0;
               transform: none;
               width: 100%;
               padding: 14px 18px;
               /* background: rgba(0, 0, 0, 0.6); */
               backdrop-filter: blur(10px);
           }

           /* HIDE CENTER NAV */
           .nav-center {
               display: none;
           }

           /* SHOW HAMBURGER */
           .menu-btn {
               display: inline-flex;
           }

           /* hide login button on mobile

           .login-btn {
               display: none;
           } */

           /* ensure hamburger is clickable */
           .menu-btn {
               display: inline-flex;
               z-index: 3000;
               cursor: pointer;
           }

           .show {
               display: none;
           }
       }

       @media (max-width: 700px) {

           /* hide login button on mobile */
           .login-btn {
               display: none;
           }

           .show {
               display: inline-block;
           }

       }

       /* Footer style */
       footer {
           background: #000;
           text-align: center;
           padding: 25px;
           color: #777;
           font-size: 0.9rem;
       }

       /* =========================
   BACKGROUND GRID
========================= */

       .bg-grid {
           background:
               linear-gradient(rgba(76, 76, 76, 0.04) 1px, transparent 1px),
               linear-gradient(90deg, rgba(51, 51, 51, 0.04) 1px, transparent 1px);

           background-size: 70px 70px;
           opacity: 0.35;
       }

       /* =========================
   FLOATING DOTS CANVAS
========================= */
       #bgDots {

           background: transparent;
       }

       /* Ensure page stays dark */
       body {
           background: #050505;
       }

       .bg-grid,
       #bgDots {
           position: fixed;
           inset: 0;
           z-index: 0;
           pointer-events: none;
       }

       #bgDots {
           z-index: 1;
       }

       /* Your main content wrapper MUST be above */
       .page-wrapper {
           position: relative;
           z-index: 5;
       }

       /* =========================
   SCROLL PROGRESS BAR
========================= */
       .scroll-progress-bar {
           position: fixed;
           top: 0;
           left: 0;
           width: 0%;
           height: 4px;
           background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
           z-index: 9999;
           transition: width 0.1s ease;
           box-shadow: 0 0 10px rgba(34, 197, 94, 0.8);
       }

       /* =========================
   BACK TO TOP BUTTON
========================= */
       .back-to-top {
           position: fixed;
           bottom: 30px;
           right: 30px;
           width: 50px;
           height: 50px;
           background: linear-gradient(135deg, #22c55e 0%, #18d5d6 100%);
           color: white;
           border: none;
           border-radius: 50%;
           cursor: pointer;
           display: flex;
           align-items: center;
           justify-content: center;
           font-size: 20px;
           box-shadow: 0 8px 24px rgba(34, 197, 94, 0.4);
           transition: all 0.3s ease;
           opacity: 0;
           visibility: hidden;
           transform: translateY(100px);
           z-index: 1000;
       }

       .back-to-top.visible {
           opacity: 1;
           visibility: visible;
           transform: translateY(0);
       }

       .back-to-top:hover {
           transform: translateY(-5px);
           box-shadow: 0 12px 32px rgba(34, 197, 94, 0.6);
       }

       .back-to-top:active {
           transform: translateY(-2px);
       }

       /* =========================
   PAGE TRANSITIONS
========================= */
       body {
           transition: opacity 0.5s ease;
       }

       /* =========================
   SMOOTH REVEAL ANIMATION
========================= */
       .reveal-hidden {
           opacity: 0;
           transform: translateY(30px);
           transition: all 0.6s ease;
       }

       .reveal {
           opacity: 1;
           transform: translateY(0);
       }

       /* =========================
   MOBILE RESPONSIVE
========================= */
       @media (max-width: 768px) {
           .loading-brand {
               font-size: 36px;
           }

           .loading-tagline {
               font-size: 12px;
           }

           .back-to-top {
               width: 45px;
               height: 45px;
               bottom: 20px;
               right: 20px;
               font-size: 18px;
           }
       }

       .btn {
           display: inline-block;
           margin-top: 30px;
           padding: 14px 38px;
           background: #4ade80;
           border-radius: 30px;
           font-weight: 600;
           font-family: 'Poppins';
           color: #000;
           transition: 0.3s;
           border: none;
           cursor: pointer;
       }

       .btn:hover {
           transform: scale(1.08)
       }