:root{
      --bg:#0f1724; --card:#0b1220; --muted:#9aa4b2; --accent:#6c5ce7; --accent-2:#00d1b2;
      --glass: rgba(255,255,255,0.03);
    }
    html,body{height:100%}
    body{
      margin:0; font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg,#0d0d0d 0%, #1367e4 100%); color:#050b10;
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      scroll-behavior:smooth;
    }

    /* PRELOADER */
    #preloader{
      position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
      background:linear-gradient(180deg, rgba(7,18,38,0.85), rgba(7,18,38,0.95)); z-index:9999;
    }
    .spinner {
      width:80px; height:80px; border-radius:50%; position:relative; filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6));
      background: conic-gradient(var(--accent), var(--accent-2));
      animation: spin 1.6s linear infinite;
    }
    @keyframes spin{ to{ transform: rotate(360deg) } }

    /* NAV */
    .navbar{backdrop-filter: blur(6px); background: linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
    .brand{font-weight:700; letter-spacing:0.3px}
    .nav-link{color:var(--muted) !important}
    .nav-link:hover{color:#fff !important}

    /* HERO */
    #hero{
      position:relative; min-height:92vh; display:flex; align-items:center;
      padding:3.5rem 0; overflow:hidden;
    }
    #tsparticles{ position:absolute; inset:0; z-index:0; }
    .hero-inner{ position:relative; z-index:5; }
    .hero-badge{ 
        
        display:inline-flex; 
        align-items:center; 
        gap:.6rem; 
        background:linear-gradient(90deg,var(--accent),var(--accent-2)); 
        padding:.4rem .8rem;
         border-radius:999px; 
         color:#fff;
          font-weight:600;
           box-shadow: 0 6px 18px rgba(108,92,231,.15)
         }

    h1.display-4{ font-weight:800; line-height:1.02; font-size: clamp(2rem, 4vw, 3.2rem) }
    .typed { color:var(--accent-2); font-weight:700 }

    .hero-cta .btn{ padding: .75rem 1.25rem; border-radius:10px; font-weight:600 }

    /* SKILLS WHEEL / ICONS */
    .skills-wrap{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center }
    .skill-pill{
         background:rgba(255,255,255,0.3); 
         padding:.2rem .75rem; border-radius:12px; 
         display:inline-flex; 
         gap:.6rem; 
         align-items:center; 
         color:#ddd; 
         transition: transform .25s ease, box-shadow .25s ease; 
        }
    .skill-pill:hover{ transform: translateY(-6px);
         box-shadow: 0 8px 30px rgba(0,0,0,.6);
          color:#fff 
        }

    /* PROJECTS */
    #projectsGrid{
        background: linear-gradient(180deg,#111418 0%, #262659 100%); color:#abb4ba;;
    }
    .projects-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; }
    .proj-card{
         background: linear-gradient(180deg, rgba(240, 242, 247, 0.8), rgba(255,255,255,0.01)); 
         border-radius:14px; overflow:hidden; position:relative;
          transition: transform .35s cubic-bezier(.2,.9,.2,1), box-shadow .35s;
           border:1px solid rgba(255,255,255,0.03)
        
        }
    .proj-card:hover{ transform: translateY(-10px); box-shadow: 0 20px 40px rgba(2,6,23,.6) }
    .proj-media{ height:160px; background-size:cover; background-position:center; }
    .proj-body{ padding:1rem }
    .badges { gap:.4rem; display:flex; flex-wrap:wrap; margin-top:.6rem }
    .tech-badge{ background:rgba(255,255,255,0.03); color:var(--muted); padding:.25rem .5rem; border-radius:8px; font-size:.78rem }

    /* FLIP ON HOVER (mobile friendly uses click) */
    .card-front, .card-back{ backface-visibility:hidden; transition: transform .6s; transform-style: preserve-3d }
    .card-back{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:1rem; transform: rotateY(180deg) }

    /* FILTERS */
    .filter-btn.active{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#fff; border:0 }

    /* TIMELINE */
    .timeline{ position:relative; padding-left:2rem; }
    .timeline::before{ content:''; position:absolute; left:12px; top:0; width:3px; height:100%; background:linear-gradient(180deg,var(--accent),var(--accent-2)); border-radius:2px }
    .timeline-item{ position:relative; margin-bottom:2rem; padding-left:1rem }
    .timeline-item::before{ content:''; position:absolute; left:-18px; top:4px; width:14px; height:14px; background:#0b1220; border-radius:50%; border:3px solid var(--accent-2) }

    /* CONTACT */
    .contact-card{ 
        background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.2));
         padding:1.2rem;
          border-radius:12px; 
          border:1px solid rgba(255,255,255,0.03)
     }

    /* FOOTER */
    footer{ margin-top:3rem; padding:2rem 0; text-align:center; color:var(--muted) }

    /* DARK MODE VARIANTS (handles later via data-theme attr) */
    [data-theme="light"]{ --bg: #f6f9fc; --card:#ffffff; --muted:#475569; color:#0b1220; background: linear-gradient(180deg,#f8fbff,#f1f6fa); }
    [data-theme="light"] .proj-card{ border-color: rgba(12,18,30,0.04) }

    /* Responsive tweaks */
    @media (max-width:768px){
      .hero-cta .btn{ width:100% }
      .hero-inner{ text-align:center }
    }