:root{
      --bg: #0b0f17;
      --card: #111727;
      --text: #e6edf6;
      --muted: #aab3c5;
      --accent: #7c5cff;
      --accent-2: #00d1b2;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
    }

    html, body { background: var(--bg); color: var(--text); scroll-behavior: smooth; }
    a { color: var(--accent); text-decoration: none; }
    a:hover { color: #a492ff; }

    /* Navbar */
    .navbar, .footer-nav { 
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
      backdrop-filter: blur(10px);
    }
    .navbar .nav-link, .footer-nav .nav-link { color: rgba(255,255,255,.7); transition: color 0.3s; }
    .navbar .nav-link:hover, .footer-nav .nav-link:hover { color: #fff; }

    /* Footer */
    footer {
      width: 100%;
      background: linear-gradient(90deg, #7b2ff7, #00c6ff);
      color: white;
      text-align: center;
      padding: 15px 0;
      margin-top: 50px;
    }

    .hero {
      position: relative;
      background: radial-gradient(80% 80% at 70% 10%, rgba(124, 92, 255, .15), transparent 60%),
                  radial-gradient(60% 60% at 20% 10%, rgba(0, 209, 178, .15), transparent 50%);
      padding: 8rem 0 6rem;
    }
    .blob {
      position:absolute; inset:auto -10% -20% auto; width: 42vmin; height: 42vmin; filter: blur(40px);
      background: conic-gradient(from 90deg, var(--accent), var(--accent-2)); opacity:.25; border-radius: 999px;
      animation: float 10s ease-in-out infinite alternate;
    }
    @keyframes float { to { transform: translateY(-20px) rotate(8deg) scale(1.03); } }

    .soft-card { background: var(--card); border: 1px solid rgba(255,255,255,.06); border-radius: 1.25rem; box-shadow: var(--shadow); }
    .soft-card:hover { border-color: rgba(124,92,255,.5); box-shadow: 0 20px 40px rgba(124,92,255,.09); }

    .btn-accent { background: linear-gradient(135deg, var(--accent), #5f3bff); border: none; color: white; box-shadow: 0 10px 20px rgba(124,92,255,.35); }
    .btn-accent:hover { filter: brightness(1.1); }
    .btn-ghost { border:1px solid rgba(255,255,255,.12); color: var(--text); background: transparent; }
    .btn-ghost:hover { border-color: var(--accent); color: var(--text); }

    .avatar { width: 200px; height: 200px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); object-fit: cover; }

    section { padding: 5rem 0; }
    .section-title { letter-spacing: .5px; }
    .muted { color: var(--muted); }

    .tag { border:1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .35rem .65rem; font-size: .85rem; }
    .form-control, .form-control:focus { background: #0e1524; color: var(--text); border-color: rgba(255,255,255,.12); }

    .view-btn { display: inline-block; padding:10px 20px; background-color:#7c5cff; color: white; text-decoration: none; border-radius: 6px; font-size: 16px; font-weight: bold; transition: background 0.3s ease; }
    .view-btn:hover { background-color:#7c5cff; }

    @media (max-width: 576px){ .hero { padding-top: 6rem; } }