:root{
      --primary: #1565d0;
      --secondary: #ce1f1f;
      --accent1: #FF6B6B;
      --accent2: #4ECDC4;
      --dark: #1A1A2E;
      --darker: #0F0F1B;
      --light: #F7F9FC;
      --card-bg: rgba(255,255,255,0.06);
      --transition: all 0.35s cubic-bezier(.17,.88,.32,1.28);
      --shadow: 0 10px 30px rgba(0,0,0,0.25);
      --glow: 0 0 18px rgba(138,43,226,0.22);
    }

    /* Scope reset to avoid interfering with bootstrap */
    .bdy * { box-sizing: border-box; }

    .bdy {     
      color: var(--light);
      min-height: 100vh;
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      overflow-x: hidden;
      position: relative;
    }

    /* Particles background (behind everything) */
    .bdy .particles-container{
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .bdy .particle{
      position: absolute;
      border-radius: 50%;
      opacity: .18;
      animation: float 15s linear infinite;
      will-change: transform, opacity;
    }
    @keyframes float{
      0%{ transform: translate(0,0) rotate(0); }
      33%{ transform: translate(20px,-30px) rotate(120deg); }
      66%{ transform: translate(-20px,20px) rotate(240deg); }
      100%{ transform: translate(0,0) rotate(360deg); }
    }

    /* Header & title */
    .bdy header { padding: 2rem 0; text-align:center; position: relative; z-index: 5; }
    .bdy .header-content { max-width:1200px; margin:0 auto; padding:0 1.25rem; }
    .bdy .header-content h1{
      font-family: 'Montserrat', sans-serif;
      font-size: 3.6rem;
      margin-bottom: .75rem;
      line-height: 1;
      background: linear-gradient(45deg,var(--primary),var(--secondary),var(--accent1));
      -webkit-background-clip: text; background-clip: text; color: transparent;
      text-shadow: 0 6px 18px rgba(0,0,0,0.25);
      animation: titleGlow 3s ease-in-out infinite alternate;
    }
    @keyframes titleGlow{
      0%{ filter: drop-shadow(0 0 6px rgba(138,43,226,0.4)); }
      100%{ filter: drop-shadow(0 0 18px rgba(0,206,209,0.45)); }
    }
    .bdy .tagline { color:#B8B8D1; font-size:1.05rem; max-width:760px; margin:0 auto; }

    /* Main container (custom name to avoid bootstrap .container collision) */
    .bdy .site-container{ max-width:1400px; margin:0 auto; padding:2rem; position:relative; z-index:4; }

    .bdy .section-title{ text-align:center; font-size:2.4rem; margin:3.5rem 0 2rem; display:inline-block; position:relative; left:50%; transform:translateX(-50%); }
    .bdy .section-title::after{ content:''; display:block; width:120px; height:5px; margin:.8rem auto; border-radius:6px; background: linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow:var(--glow); }

    /* Filter buttons */
    .bdy .filter-row{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2.8rem; }
    .bdy .filter-btn{
      padding:.85rem 1.6rem; border-radius:50px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03);
      color:var(--light); font-weight:600; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden;
    }
    .bdy .filter-btn::before{ content:''; position:absolute; inset:0; left:-100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); transition:var(--transition); }
    .bdy .filter-btn:hover::before{ left:100%; }
    .bdy .filter-btn.active{ background: linear-gradient(45deg,var(--primary),var(--secondary)); box-shadow:var(--glow); color:#fff; }

    /* Projects grid */
    .bdy .projects-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(340px,1fr)); gap:2rem; }

    .bdy .project-card{
      background: var(--card-bg);
      border-radius:14px;
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:var(--transition);
      position:relative;
      border:1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(6px);
      z-index:3;
    }
    .bdy .project-card:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(0,0,0,0.5), var(--glow); }

    .bdy .project-img{ height:200px; background: linear-gradient(45deg, #afb2b7, #494848); position:relative; overflow:hidden; }
    .bdy .project-badge{ position:absolute; top:16px; right:16px; padding:.4rem .9rem; border-radius:999px; color:#fff; font-weight:700; box-shadow:0 6px 18px rgba(0,0,0,0.2); z-index:6; }
    .bdy .badge-live{ background: linear-gradient(45deg,var(--accent1),#FF8E8E); animation: pulse 2.2s infinite; }
    .bdy .badge-progress{ background: linear-gradient(45deg,var(--accent2),#6FFFE9); }
    .bdy .badge-product{ background: linear-gradient(45deg,var(--primary),#A45EE5); }

    .bdy .project-body{ padding:1.25rem 1.5rem; }
    .bdy .project-title{ font-size:1.2rem;  margin-bottom:.6rem; display:inline-block; position:relative; }
    .bdy .project-title::after{ content:''; position:absolute; bottom:-8px; left:0; width:48px; height:4px; background:var(--secondary); border-radius:4px; transition:var(--transition); }
    .bdy .project-card:hover .project-title::after{ width:100%; }

    .bdy .project-desc{ color:#B8B8D1; margin-bottom:.9rem; line-height:1.5; font-size:.95rem; }

    .bdy .tech-tags{ margin-bottom: .9rem; }
    .bdy .tech-tags .tag{ display:inline-block; background: rgba(255,255,255,0.03); padding:.28rem .6rem; border-radius:18px; margin:.12rem; font-size:.78rem; color:#e6e6f5; }

    .bdy .progress-wrap{ margin-bottom:1rem; }
    .bdy .progress-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; color:#cfcfe6; font-size:.9rem; }
    .bdy .progress-bar{ height:10px; background: rgba(255,255,255,0.03); border-radius:10px; overflow:hidden; }
    .bdy .progress-fill{ height:100%; border-radius:10px; width:0; transition:width 1.2s cubic-bezier(.22,.61,.36,1); background: linear-gradient(90deg,var(--primary),var(--secondary)); }

    /* Stats row */
    .bdy .stats-row{ display:flex; gap:1rem; justify-content:space-between; margin-bottom:1rem; background: rgba(0,0,0,0.12); padding:.8rem; border-radius:12px; color:#cfcfe6; }
    .bdy .stat{ text-align:center; flex:1; }
    .bdy .stat .value{ font-size:1.1rem; font-weight:700; background: linear-gradient(45deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color: transparent; }
    .bdy .stat .label{ font-size:.75rem; color:#9b9ab7; margin-top:.25rem; }

    /* Actions */
    .bdy .actions{ display:flex; gap:.6rem; }
    .bdy .btn-custom{ flex:1; padding:.6rem .9rem; border-radius:10px; font-weight:700; border:0; cursor:pointer; display:inline-flex; gap:.5rem; align-items:center; justify-content:center; }
    .bdy .btn-primary-custom{ background: linear-gradient(45deg,var(--primary),var(--secondary)); color:#fff; }
    .bdy .btn-secondary-custom{ background: transparent; color:var(--secondary); border:2px solid var(--secondary); }

    /* small utilities */
    @keyframes pulse{ 0%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,107,107,0.6);} 70%{ transform:scale(1.04); box-shadow:0 0 0 12px rgba(255,107,107,0);} 100%{ transform:scale(1); box-shadow:0 0 0 0 rgba(255,107,107,0);} }

    /* responsive */
    @media (max-width: 992px){ .bdy .project-img{ height:180px; } .bdy .header-content h1{ font-size:2.6rem; } }
    @media (max-width: 576px){ .bdy .project-img{ height:150px; } .bdy .header-content h1{ font-size:2rem; } .bdy .filter-row{ gap:.6rem; } .bdy .section-title{ font-size:1.6rem; } }

    /* keep custom scrollbar optional */
    ::-webkit-scrollbar{ width:10px; }
    ::-webkit-scrollbar-thumb{ background: linear-gradient(45deg,var(--primary),var(--secondary)); border-radius:10px; }