@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
    :root{
      --bg: #ffffff;
      --muted: #f3f4f6;
      --text: #0f1720;
      --subtle: #6b7280;
      --accent: #ff6a00;
      --border: rgba(15,23,32,0.06);      
      --max-w:1200px;
      --card-radius:20px;
      --glass: rgba(255,255,255,0.8);
      font-family: Inter;
    }


    .nav-wrap{width:100%;background:var(--bg);}
    .nav-inner{margin:0 auto;display:flex;flex-direction:column}

    .nav-top{display:flex;align-items:center;gap:16px;padding:12px 20px}
    .brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;text-decoration: none;color: #000;}
    .brand img{height:40px;width:40px;border-radius:8px;object-fit:cover}
    .brand .title{font-weight:600;font-size:1rem;font-family: Fira code;}

    /* search fills the available central area */
    .nav-center{flex:1;display:flex;align-items:center}
    .search{width:100%;display:flex;align-items:center;border-radius:8px;padding:10px 12px;border:1px solid #363636;box-shadow:none}
    .search svg{width:16px;height:16px;margin-right:10px;opacity:0.6}
    .search input{border:0;background:transparent;outline:none;font-size:0.95rem;width:100%}

    .nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
    .btn{font-weight:600;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    .btn-login{background:transparent;color:var(--text)}
    .btn-signup{background:var(--accent);color:#fff}
    .btn-launch{background:transparent;color:var(--accent)}

    /* categories: centered, anchors, non-wrapping, overflow clipped */
    .nav-cats{display:flex;justify-content:center;gap:18px;padding:12px 20px;border-top:1px solid var(--border);overflow:hidden;white-space:nowrap}
    .nav-cats a{flex:0 0 auto;text-decoration:none;color:var(--text);font-weight:600;font-size:0.86rem}
    .nav-cats a:hover{text-decoration:underline;text-underline-offset:3px}

    /* mobile: keep search visible but move it below header; top bar minimal */
    @media (max-width:720px){
      .nav-top{padding:10px 14px}
      .nav-center{justify-content:flex-end}

      /* hide desktop search area */
      .search{display:none}

      /* show only sign in on top bar */
      .btn-signup, .btn-launch{display:none}
      .btn-login{display:inline-flex;margin-left:auto}

      .nav-cats{display:none}
    }

    /* mobile search shown below header: full width */
    .mobile-search-btm{display:none;max-width:var(--max-width);margin:0 auto;padding:10px 20px}
    .mobile-search-box{display:flex;align-items:center;border-radius:8px;padding:10px 12px;border:1px solid var(--border)}
    .mobile-search-box svg{width:16px;height:16px;margin-right:10px;opacity:0.6}
    .mobile-search-box input{border:0;background:transparent;outline:none;font-size:0.95rem;width:100%}
    @media (max-width:720px){.mobile-search-btm{display:block}}

    /* mobile categories below content: centered inline list (no wrap) */
    .mobile-cats{display:none;max-width:var(--max-width);margin:18px auto 40px;padding:0 20px}
    .mobile-cats-list{display:flex;justify-content:center;gap:12px;overflow:hidden;white-space:nowrap}
    .mobile-cats-list a{flex:0 0 auto;padding:10px 8px;text-decoration:none;color:var(--text);font-weight:600;font-size:0.92rem}
    .mobile-cats-list a:hover{text-decoration:underline}
    @media (max-width:720px){.mobile-cats{display:block}}