:root{
    --bg-1: #ffffff;
    --bg-2: #f4f6f9;
    --accent-1: #00b7ff;
    --accent-2: #ff47d4;
    --accent-3: #ffc107;
    --glass: rgba(255,255,255,0.6);
    --card-radius: 20px;
    font-family: 'Poppins', 'Inter', sans-serif;
  }

  html,body{
    height:100%;
    margin:0;
    background:linear-gradient(180deg, var(--bg-1), var(--bg-2));
    color:#212529;
    overflow-x:hidden
  }

  #three-bg{
    position:fixed;inset:0;z-index:0;pointer-events:none
  }

  .site-container{position:relative;z-index:2}

  .navbar-glass{
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 12px 20px;
    box-shadow:0 8px 30px rgba(0,0,0,0.08);
  }

  .brand{
    font-weight:800;
    font-size:1.3rem;
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .nav-link-btn{
    color:#212529;font-weight:600;transition:.3s
  }
  .nav-link-btn:hover{color:var(--accent-1)}

  .hero{
    min-height:80vh;display:flex;align-items:center;padding-top:6rem;padding-bottom:4rem;overflow:visible
  }

  .glass-card{
    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
    backdrop-filter: blur(18px) saturate(180%);
    border-radius: var(--card-radius);
    padding:2rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    transition:transform .4s ease, box-shadow .4s ease;
  }
  .glass-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 60px rgba(0,0,0,0.12)
  }

  .pill{
    display:inline-block;
    padding:6px 14px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
    color:#fff;font-weight:700;font-size:.85rem;
    box-shadow:0 0 12px rgba(0,183,255,0.3)
  }

  h1 span{
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));
    -webkit-background-clip:text;color:transparent;font-weight:800
  }

  .blog-card{transition:transform .4s, box-shadow .4s;cursor:pointer}
  .blog-card:hover{
    transform:translateY(-12px) scale(1.03);
    box-shadow:0 20px 60px rgba(0,0,0,0.15)
  }

  .mini-glass{
    background:rgba(255,255,255,0.8);
    padding:6px 12px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,0.08);
    font-size:0.85rem;
  }

  footer{
    padding:3rem 0;
    color:#555;font-size:0.9rem;text-align:center
  }

  .accent-line{
    height:3px;
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2),var(--accent-3));
    border-radius:4px;
    box-shadow:0 0 12px rgba(0,183,255,0.3)
  }

  .morph-target{border-radius:24px;transition:border-radius .6s ease}

  .btn-primary{
    background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
    border:none;font-weight:600;
    box-shadow:0 0 18px rgba(0,183,255,0.4)
  }
  .btn-primary:hover{box-shadow:0 0 28px rgba(255,71,212,0.4)}

  .btn-outline-light{
    border:2px solid #212529;
    color:#212529;
    font-weight:600
  }

  @media (max-width: 767px){
    .hero{padding-top:4rem;padding-bottom:2.5rem}
    .brand{font-size:1.1rem}
  }