:root {
        --bg: #0b1220; /* dark base */
        --surface: #0f172a; /* dark surface */
        --text: #e5e7eb; /* text on dark */
        --muted: #9ca3af; /* muted text */
        --primary: #7c3aed; /* accent */
        --primary-ghost: rgba(124, 58, 237, 0.18);
        --card: #0f172a;
      }
      .portfolio {
        background: #fff;
      }

      * {
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      body {
        font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial;
        background: var(--bg);
        color: var(--text);
      }

      /* NAVBAR */
      .navbar {
        transition: all 0.3s ease;
      }
      .navbar .nav-link {
        color: rgba(229, 231, 235, 0.85);
      }
      .navbar .nav-link.active,
      .navbar .nav-link:hover {
        color: #fff;
      }
      .navbar {
        backdrop-filter: saturate(140%) blur(8px);
        background: rgb(0 0 0) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
      }

      /* HERO */
      header.hero {
        position: relative;
        min-height: 84vh;
        display: flex;
        align-items: center;
        overflow: hidden;
      }

      .hero-grid {
        position: absolute;
        inset: 0;
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.05) 1px,
          transparent 1px
        );
        background-size: 22px 22px;
        opacity: 0.5;
      }
      .hero .container {
        position: relative;
        z-index: 2;
      }
      .badge-soft {
        background: var(--primary-ghost);
        color: #fff;
        border: 1px solid rgba(124, 58, 237, 0.35);
      }
      .display-hero {
        font-family: Poppins, Inter, sans-serif;
        font-weight: 800;
        letter-spacing: 0.2px;
      }
      .lead-hero {
        color: rgba(255, 255, 255, 0.9);
        max-width: 760px;
      }
      .typed {
        border-right: 2px solid rgba(255, 255, 255, 0.85);
        padding-right: 2px;
      }

      /* SECTION WRAPPERS */
      section.section {
        padding: 80px 0;
      }
      .section-light {
        background: linear-gradient(180deg, #0f172a, #0b1220);
      }
      /* ensure in-page anchors don't hide under fixed navbar */
      section[id] {
        scroll-margin-top: 100px;
      }

      /* CARDS & SURFACES */
      .surface {
        border-radius: 16px;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.2);
      }
      .btn-primary {
        background: var(--primary);
        border-color: var(--primary);
      }
      .btn-outline-light {
        border-color: rgba(255, 255, 255, 0.25);
        color: #fff;
      }

      /* MASONRY GRID (CSS Columns) */
      .masonry {
        column-count: 3;
        column-gap: 1.25rem;
      }
      .masonry-item {
        break-inside: avoid;
        display: inline-block;
        width: 100%;
        margin: 0 0 1.25rem;
      }
      .portfolio-card {
        position: relative;
        overflow: hidden;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, 0.14);
      }
      .portfolio-card img {
        width: 100%;
        height: auto;
        display: block;
        transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.2, 1);
      }
      .portfolio-card:hover img {
        transform: scale(1.06);
      }
      .portfolio-meta {
        position: absolute;
        inset: auto 0 0 0;
        padding: 1rem;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(2, 6, 23, 0.85) 100%
        );
        color: #fff;
      }

      .filter-btns .btn {
        border-color: rgba(148, 163, 184, 0.25);
      }
      .filter-btns .btn.active {
        background: var(--primary);
        border-color: var(--primary);
      }

      /* REVEAL ANIMATIONS */
      .reveal {
        opacity: 0;
        transform: translateY(24px);
        transition: all 0.65s cubic-bezier(0.2, 0.9, 0.2, 1);
      }
      .reveal.visible {
        opacity: 1;
        transform: none;
      }

      /* PARALLAX SECTION */
      .parallax {
        position: relative;
        /* background: url("https://images.unsplash.com/photo-1526378722484-bd91ca387e72?q=80&w=1920&auto=format&fit=crop")
          center/cover fixed; */
        min-height: 360px;
      }
      .parallax::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(11, 18, 32, 0.3),
          rgba(11, 18, 32, 0.8)
        );
      }

      /* SKILLS */
      .skill {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.8rem 1rem;
        border-radius: 12px;
        background: rgb(124 124 124 / 68%);
        border: 1px solid rgba(148, 163, 184, 0.14);
        margin-bottom: 0.75rem;
      }
      .progress {
        background: rgba(255, 255, 255, 0.08);
        height: 10px;
        border-radius: 999px;
      }

      /* FOOTER */
      footer {
        color: var(--muted);
      }

      /* Responsive tweaks */
      @media (max-width: 1200px) {
        .masonry {
          column-count: 2;
        }
      }
      @media (max-width: 768px) {
        .masonry {
          column-count: 1;
        }
        header.hero {
          min-height: 72vh;
        }
      }
      .post-card-img {
        position: relative;
        overflow: hidden;
        border-radius: 10px;
        background-color: #fff;
        border: 1px solid #ddd;
        cursor: pointer;
      }

      .post-card-img img {
        display: block;
        width: 100%;
        height: 300px;
        transition: transform 0.4s ease, filter 0.4s ease;
      }

      .post-card-img::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom right,
          transparent,
          rgba(31, 31, 31, 0.6)
        );
        z-index: 1;
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .post-card-img:hover img {
        transform: scale(1.05);
        filter: brightness(0.95);
      }

      .post-card-img:hover::before {
        opacity: 1;
      }

      .text-primary {
        color: #7c3aed !important;
      }
      .skill {
        font-weight: 500;
        display: flex;
        justify-content: space-between;
        color: #fff;
      }
      .progress {
        height: 8px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 5px;
        overflow: hidden;
      }
      .progress-bar {
        width: 0;
        transition: width 1.5s ease-in-out;
      }
      ::placeholder {
    color: #00ff73 !important;
    opacity: 1;
}
input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}